Query Loop > Grid Layout Codex!

[neosan]

Hello everyone,

I’m creating this post as a reference point for anyone facing similar challenges with the grid loop. After browsing forums and rethinking multiple times, I haven’t found a working answer or code, even with AI assistance. This seemingly simple request to manipulate the grid layout has drained a lot of my energy, so I’ve decided to create this post.

Don’t hesitate to share your solutions (preferably simple) and your CSS code to achieve this. Thanks in advance!

Let’s go back to my problem and where it all started:

I created a simple grid with 2fr 1fr 1fr. I thought it would be interesting to reverse the second row to 1fr 1fr 2fr. So the layout would look like this:

2fr 1fr 1fr
1fr 1fr 2fr

Request:

What is the simplest method to achieve this?

I wish to see as many possibilities and compositions as possible to master this aspect of grid, for me and anyone who wishes to find a reference on this forum concerning the Query Loop > Grid Layout

If you have interesting compositions to show, don’t hesitate.

[parktechno]

Such non-standard grids are called Bento Grid or Bento UI. Look for information on this topic. The structure of such a layout can be very different.

BentoGrids

What is the Bento UI Trend, and How Can You Get Started? | Web Designer Depot

[Pete]

This is what I’d do:

First, math it out to 2fr + 1fr + 1fr = 4fr so:
grid-template-columns: repeat(4,minmax(0,1fr))

That’ll give us 4 equal parts, but we want items 1 and 6 to take up 2 of those parts, so on the grid itself add:

%root% .your-grid-item-wrapper:nth-of-type(6n+1), .your-grid-item-wrapper:nth-of-type(6n+6) {grid-column: span 2;}

Explanation: There are 6 steps in the whole pattern, (6n) and we want to target the first (6n+1) and the last (6n+6) and make them span 2 columns, before it repeats.

[SuatB]

if you want this pattern to stay static, you could use grid-template-aras like this

.archive {
  display: grid;
  grid-template-areas:
    "triplex triplex townhome cottage"
    "house condos duple duplex";
  grid-template-columns: repeat(4,1fr);
}

Then you just tell the children where to go:

.type-card:nth-child(1){
 grid-area: triplex;
}

What you also could do is add a dynamic attribute in bricks like [data-post-type= {post_slug}]

then your css would be even more readable and you don’t have to work with nth-child-selectors

[data-post-type="condos"] {
 grid-area: condos;
}

[neosan]

Stage 1

I’d like to thank @Pete for the clear and concise approach. It helped me successfully implement the desired layouts.

While @SuatB static grid control method is intriguing, and worked also

better , I discovered a simpler alternative that works well also . a little more exotic but it works like a charm.

%root% .type_card:nth-child(1) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
}

%root% .type_card:nth-child(2) {
  grid-column: 1 / span 2;
  grid-row: 2;
}

Stage 2

by surfing a little on the web I came across this grid

source

which seems a little more complicated but I managed to reproduce a little bit the logic but without success on the internal part where it seems to me to give a fixed height does not adapt the cards to the remaining space

.city_card:nth-child(1) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}

.city_card:nth-child(8) {
  grid-column: 5 / span 1;
  grid-row: 1 / span 2;
}

.city_card:nth-child(2),
.city_card:nth-child(3),
.city_card:nth-child(4),
.city_card:nth-child(5),
.city_card:nth-child(6),
.city_card:nth-child(7) {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}

how to pass this stage?

[Pete]

From eyeballing it, the grid needs to be 5 columns and 7 rows

Land for Sale and Waterfront are span 7 rows
Farms and Ranches, Hunting Land and Homesites are span 3 rows
Timberland and Commercial Land are span 4 rows

All span auto for columns

[neosan]

After a struggle and a race to catch the perfect CSS grid method for query loops.
I found this method :

.city-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 10px;
  height: 500px;
  grid-template-areas:
    "a b e g h"
    "a b e g h"
    "a b e g h"
    "a b d g h"
    "a c d f h"
    "a c d f h"
    "a c d f h";
}

.city_card:nth-child(1) {
  grid-area: a;
}

.city_card:nth-child(2) {
  grid-area: b;
  border: solid 5px orange;
}

.city_card:nth-child(3) {
  grid-area: c;
  border: solid 5px green;
}

.city_card:nth-child(4) {
  grid-area: d;
  border: solid 5px purple;
}

.city_card:nth-child(5) {
  grid-area: e;
  border: solid 5px yellow;
}

.city_card:nth-child(6) {
  grid-area: f;
  border: solid 5px pink;
}

.city_card:nth-child(7) {
  grid-area: g;
  border: solid 5px blue;
}

.city_card:nth-child(8) {
  grid-area: h;
}

which at first sight, seemed strange…but it worked!

The border colors are artifacts of my tests to understand the layout better. The old grid-column & grid-row method is enough to drive anyone with eyes crazy, with items sometimes being replaced randomly without any logic.

Explanation of the Improvement:

• Grid Template Areas: By defining named areas within the grid, we can assign cards to specific areas using the grid-area property. This makes the layout more readable and easier to modify.
• Reduced Complexity: This approach eliminates the need for complex nth-child selectors, making the CSS more concise and maintainable.
• Flexibility: If you need to rearrange the cards or add new ones, you can simply modify the grid-template-areas definition without affecting the rest of the CSS.

Additional Considerations:

• Responsive Design: If you need to make the layout responsive, consider using CSS Grid’s fr units for flexible column widths and media queries to adjust the grid template areas for different screen sizes.
• Accessibility: Ensure that your layout is accessible to users with disabilities by using appropriate semantic HTML elements and ARIA attributes.
• Performance: Minimize the number of CSS rules and avoid unnecessary specificity to optimize performance.

By following these guidelines, you can create a more robust and maintainable CSS layout for your city container.

This concludes our stage 2 with success

Trick
If you’re like me and not a big fan of constantly adjusting the CSS for every breakpoint,
for tablet and below I’ve found it’s best to let Bricks manage it for simplicity, responsive logic, and peace of mind.

I haven’t found a better way to handle our complex layouts for tablets and smaller screens.

 .city-container {
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    height: auto;
  }
  
  .city_card {
    grid-area: auto !important;
  }

Now, you can modify the grids safely and with confidence.