[Support request] Responsive blog grid with different sizes

[Benny]

Hey there, i want to build a blog with gp but with a grid of different sizes. Ist this even possible?

Maybe something like this –> https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/

Some posts should have the width or height of 2 other posts.

[Benny]

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

[Leo]

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 🙂

[Benny]

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 2×1 and some 2×2 or 1×2 for example.
A bit like 99u.adobe.com or wired.com

[Leo]

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.

[Benny]

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

[Leo]

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.

[Benny]

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

[Leo]

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.

[Benny]

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

[Tom]

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.

[Benny]

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

[Tom]

Sounds good! 🙂

[Author]

Posts