Portfolio post page display

How To
1

I am losing my mind… I have been trying for hours to make this display work for a portfolio page. I am trying to make a grid display - 5 column display with each card spanning 2 columns and 1 row, so there is a free column down the centre for spacing. First card starting in column 1 row 1, next card starting in column 4 row 2, next card column 1 row 3, next card column 4 row 4 and so on for 10 posts. I would like the cards on the right to have a negative margin to draw them upward. Also, the card info is being drawn in with a query loop. See the picture below.

Screenshot 2025-10-19 at 8.50.09 pm
Screenshot 2025-10-19 at 8.50.09 pm1918Ă—1630 76.4 KB

I can get it to the point that each card is 2 spans so column 1 and 2 but I cant get a selector to work to be able to select the children so I can use:

.portfolio-card:nth-child(odd) {
grid-column: 1 / span 2;
}

.portfolio-card:nth-child(even) {
grid-column: 4 / span 2;
margin-top: -6rem;
}

Please help!!

2

If it is for a query loop, shouldn’t just have to build the first parts that repeats?

Bricks has this build in visual grid builder that will generate the css itself. You should check it out.

3

Hi Ferry,

Yeah I knew about it but could not make it work as it was not displaying the query looped posts. But thanks to you asking about it I had another look and figured out that I had the query loop on the container and not the card which is why it was only displaying the one card in the loop grid. So you accidentally helped me figure it out so thank you!