CSS Grid Layout of posts

Themes
1

Hi all,

I’m building a custom theme and want to know if anyone has examples of using either flexbox and/or css grid when pulling a list of posts.

I want to create a grid where the first post is larger than the next 2 and then the 4 larger again.

Something similar to the grid on this homepage - https://underbelly.is/

Is this possible with Ghost? I’m a little unsure of the best way to achieve this from a CSS & ghost tags perspective.

2

Well, I’m not an expert - but as the default Casper theme already uses flex, and is responsive, clearly it is possible. :slight_smile:

As to the CSS - if you have an example of something you like, you could just investigate how they do it, and replicate it. For example on the URL you identified, it looks like the large images are a single post in a big div, followed by another div of exactly same size - but the second div contains two half-sized divs i.e.

<div class=big >
    <article class=big />
</div>
<div class=big >
    <div> <article class=half /> </div>
    <div> <article class=half /> </div>
</div>

You might consider fetching the article summaries and then using JS to create this kind of document structure.