How to do this Grid Layout with Bricks Builder - Loop compatible

[@chrisparky]

Very kind to do this sort of video. I think people can learn loads from videos like this.

[@olivercole8883]

Yeah I agree, I've learned plenty on grid with just this video

[@NorthTonawanda1]

@@olivercole8883--- I made it but still haven't implemented it on their site, I'm planning a full rebuild in Cwicly with components. It was done on one of a number of practice domains I mess around with. I went hunting for it, but I think it's probably on an expired domain. No matter, it was done like you how you described. The only tricky part was when, at the bottom of a column, it broke the card into the next column. The fix was easy, just had to use break-inside-avoid.

[@ElementoryMyDearWatson]

I notice when switching to flex on mobile you lose the alternating card colors, can that be corrected? Definitely going to take a few watches for me to get my head around it, but thank you so much, this is very clever.

[@wpeasy]

To do that you would need two media queries.
The current coloring CSS in a @media(min-witth: 478px){ }
Mobile coloring in:
@media( max-width: 478px){
%root%__item:nth-child(odd){
/* Change colors here */
}
}

[@davidnickson5043]

This was super helpful, loved how you explained flex grow, grid auto flow and the 105% height.
How would you keep the colours alternating on mobile? Just smash in an odd / even css to change the card colours again at that breakpoint?

[@wpeasy]

Several ways.
You could wrap the current CSS for "alternates" coloring in @media(min-width: 768px)
Then just set a default with
%root%:nth-child(even){
--bg-color: #555;
/* Etcetera */
}

[@NorthTonawanda1]

I made a very similar structure for a restaurant client. Each dish on a dynamically populated lunch/dinner menu was a simple card with the name of the dish the price and description (of variable length, i.e., height.) I was able to do it using CSS columns. Each variable length card easily flowed between columns. I wonder if people are over thinking this.

[@wpeasy]

People are always overthinking :) that is part of the fun.
When you say CSS Columns, do you mean "column-count" ?
The user who asked the initial question was asking for a specific layout, I'm not sure it could be done with "column-count".
I posted a video a few days ago showing how to do a pseudo-masonry grid using "column-count" which does achieve the column flow. However, it does have its limitations and quirks.
It would be great to see a URL to the restaurant site you are referring to.

[@NorthTonawanda1]

@@wpeasy --- I made it but still haven't implemented it on their site, I'm planning a full rebuild in Cwicly with components. It was done on one of a number of practice domains I mess around with. I went hunting for it, but I think it's probably on an expired domain. No matter, it was done like you how you described. The only tricky part was when, at the bottom of a column, it broke the card into the next column. The fix was easy, just had to use break-inside-avoid.

[@wpeasy]

@@NorthTonawanda1 The other thing that I found was that to get vertical spacing you need to add top or bottom padding or margin.
I used bottom margin and found the following:
* Windows PC. Chrome and firefox worked as expected.
* IOS devices, the margin from the lowest card (on screen) wraps to the top of the next column. So one column is slightly out of wack.
I resolved this by putting a wrapper on the Card:
* It resolved the IOS issue
* On Windows PC, Firefox now had the same issue as IOS previously had.
I have since seen that Tailwind uses a similar method, with the margin on the top instead, perhaps that makes a difference?
The other big issue I saw was that using column balancing, it felt impossible to control the order of items.

[@rolla427]

Could you make a video how to build the whole woocommerce site in bricks builder? I searched and found no one did it😂