How to: 12 Col Grid for Layout Design?

Hey All, I’m beginning to convert my Figma design over to Bricks. I’m needing some guidance on Best Practices for setting up a 12 Column system for Layout Design.

Attached image shares 3 different container builds I wish to have. Is there a scalable workflow for building containers that follow a 12 column system like this?

Hi Blakek,
at first you need a visual page grid inside Bricks. Like mine. Or do you got one already?


Hey, Heiko Dietze

I do not have one. I’d like to learn how you set it up and use it.

I’d also like to learn how you build containers that span different Column Lengths. Example containers below

Hey Blakek, all right - I’m going to make a video on how to set it up and achieve the container lengths on my YT channel and you’ll be the first to know about it. :slightly_smiling_face: I suppose I could get it done Saturday, because this week is a bit busy. But stay tuned, I’ll show you how this works!

I believe I have set it up somewhat correctly? For example, the bottom Container is Grid Col: repeat(12, 1fr) with a Child Block, Grid Col: 2/12

Yes, that’s right! :+1:t2:

1 Like

Hi Heiko,

I also wanna get this visual page grid inside the bricks.
could you please let me how how to get it in bricks? thank you

1 Like

Try Advanced Themer. It has an excellent visual Grid designer.

hi alanj, thanks for your kind reply. Advanced need to pay, is there any free way to do this?

No idea I’m afraid. I use AT for all sorts - its well worth the cost.

Hi @michaelseostudio ,

I think you want really the visual grid, not a grid design function.

And there’s surely a free and easy way for Bricks! :partying_face: I will prepare a video for you that shows how to do it.

Best wishes, Heiko

1 Like

@heiko.dietze thanks in advance I would be interested in this too!

yes, I also am your fan in YT, waiting for your video.