How to make blocks "flow" within their container so they wrap/break horizontally depending on available width?

Hi! Newbie here.

I would like blocks to “flow” or “wrap” horizontally, so they naturally break into rows, depending on the width of the blocks.

Please see short video showing my attempt: Bricks Builder > Making rows flow

As shown in the video, intuitively, I tried putting the container to horizontal, and then assign a width of 33% to each block, anticipating that they would arrange themselves in 3 column rows (on desktop).

My plan was to change that to eg 49% width when on mobile so they would naturally break to 2 “columns.”

However that failed… all six blocks all just somehow magically still fit inside the container, even at 33% width! :thinking:

You can see my example from my video here:

And for clarity, here is basically what I’m going for (mock up):

That is the desktop look; on mobile they would naturally wrap into rows of 2 blocks, because their width would be 50%…

Thanks for helping me figure this out.

1 Like

Hi Drew,
You just have to set the column to flex-wrap: wrap to allow the blocks to wrap.

Please have a look at this simple template. The left column blocks use a calc function to calculate the width with regard to the gaps, the right column blocks are just set to 33.333% width without any gaps.

Best regards,
timmse

1 Like

Thank you very much!