Mastering Split Grid Layout in Bricks Builder (Pt 1)

[@daveden2]

NOTE: When setting gap and gutter variables, always include a unit (like 'px' or 'em'). For example, use 0px instead of just 0.
This is essential because CSS calculations require units to function correctly.

[@websquadron]

Well explained, David.

[@daveden2]

Thank you!!!

[@eduardkirin387]

Great video David, keep them coming 👍

[@daveden2]

Thanks!!!

[@andre.bandarra]

Great content, you inspire me to do videos about Bricks Builder in my language

[@daveden2]

Thanks!! Yeah, go for it. You'll definitely be helping someone out.

[@koqpe13]

Thank you !

[@daveden2]

Here's the link to the code - daveden.co.uk/tutorials/mastering-split-grid-layout-in-bricks-builder/

[@vaughanprint]

On first viewing you seem to be using a container as the top level element, without a section, but I still see gutters, say if we look at the 1min 40 sec mark of the video?

[@daveden2]

Oh yes, I tend to control the width of the container using a calc function rather than adding gutter padding to the section.
I learnt that from Kevin Powell.

[@vaughanprint]

@@daveden2 Ok, that make sense. Does this mean that we can translate the classes here to the section and have the inner elements of the BEM on say container and Image?

[@daveden2]

@@vaughanprint, the way I do it is to have a wrapper "Section" set to zero padding. Then, add the classes to the container and inner blocks, as shown in the video.

[@vaughanprint]

@@daveden2 I'll give it a spin.

[@daveden2]

@@vaughanprint, cool! Please let me know how it goes. 🙏

[@zensukai]

Great tutorial, but it would be helpful if folks knew what parameters you have set within your variables.

[@daveden2]

Thanks! In the tutorial, the CSS Variables I used were from CoreFramework

[@zensukai]

@@daveden2 Cool, thanks for that.