Responsive blog grid with different sizes

Should be looking like this --> https://99u.adobe.com/

Hi there,

The masonry option would be the closest solution for now:
https://docs.generatepress.com/article/using-columns-in-the-blog/

Let me know if this helps :)

I know the masonry option already. Used it on my own blog. But i need something different. The Blogposts should be different in size. If there is a grid with 3 columns, some should be 2x1 and some 2x2 or 1x2 for example.
A bit like 99u.adobe.com or wired.com

That will require quite a bit of custom coding to modify the current grid system and I'm not sure if it's even possible, unfortunately.

Yeah, i thought so too. Maybe someone has a clue how to do it.

The example you linked is using CSS grid and our blog add-on is still using grid/float system.

You'd basically need to completely rebuild the posts page from scratch.

I know but its just an example hoe it could look like.

I don't think it's possible to create that kind of layout for the blog page using the existing grid system that works on all devices.

Sorry about that.

What is, if i would use a plugin and build a page with a grid or something?

You can actually use the CSS tricks in GP:

.blog .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 32px;
  grid-auto-flow: dense;
}

/* Extra-wide grid-posts */
.blog article:nth-child(31n + 1) {
  grid-column: 1 / -1;
}

.blog article:nth-child(16n + 2) {
  grid-column: -3 / -1;
}

.blog article:nth-child(16n + 10) {
  grid-column: 1 / -2;
}

/* Single column display for phones */
@media (max-width: 459px) {
  .site-main {
    display: flex;
    flex-direction: column;
  }
}

However, it will take some tweaking to get just right.

Thank you! I will try it next week. Tweaking isn't the problem. Generally how to start was it 😁

Sounds good! :)