Row Sizing

Row Sizing

Here is a list of CSS variables for row sizing based on your specifications, formatted to be easily pasted into Bricks Builder’s CSS Variables section.

Each variable represents a different row span, with values defined to control the row sizing at various breakpoints.

/* Row Sizing - Desktop Row Span */
--c-row-span-6: span 6;
--c-row-span-5: span 5;
--c-row-span-4: span 4;
--c-row-span-3: span 3;
--c-row-span-2: span 2;
--c-row-span-1: span 1;

/* Row Sizing - 1400px and Less (Extra Large) */
--c-row-span-xl-6: span 6;
--c-row-span-xl-5: span 5;
--c-row-span-xl-4: span 4;
--c-row-span-xl-3: span 3;
--c-row-span-xl-2: span 2;
--c-row-span-xl-1: span 1;

/* Row Sizing - 992px and Less (Large) */
--c-row-span-l-6: span 6;
--c-row-span-l-5: span 5;
--c-row-span-l-4: span 4;
--c-row-span-l-3: span 3;
--c-row-span-l-2: span 2;
--c-row-span-l-1: span 1;

/* Row Sizing - 768px and Less (Medium) */
--c-row-span-m-6: span 6;
--c-row-span-m-5: span 5;
--c-row-span-m-4: span 4;
--c-row-span-m-3: span 3;
--c-row-span-m-2: span 2;
--c-row-span-m-1: span 1;

/* Row Sizing - 480px and Less (Small) */
--c-row-span-s-6: span 6;
--c-row-span-s-5: span 5;
--c-row-span-s-4: span 4;
--c-row-span-s-3: span 3;
--c-row-span-s-2: span 2;
--c-row-span-s-1: span 1;
How to Use in Bricks Builder
  • Paste the Variables: Copy all the lines and paste them directly into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
  • Using the Variables in CSS:
    • In your grid container, use grid-row to apply row spans based on the screen size. For example:
grid-row: var(--c-row-span-3);

These CSS variables allow for easy control over row spans across different screen sizes. This setup mimics utility classes for responsive row spans and makes it simple to apply consistent layouts in Bricks Builder.

Combined Variables Entry for Bricks

If you want to enter all these variables into Bricks in one go, here’s the full list combined for easy copy-pasting (with semicolons separating each variable):

--columns-6: repeat(6, 1fr); --columns-5: repeat(5, 1fr); --columns-4: repeat(4, 1fr); --columns-3: repeat(3, 1fr); --columns-2: repeat(2, 1fr); --columns-xl-5: repeat(5, 1fr); --columns-xl-4: repeat(4, 1fr); --columns-xl-3: repeat(3, 1fr); --columns-xl-2: repeat(2, 1fr); --columns-xl-1: repeat(1, 1fr); --columns-l-4: repeat(4, 1fr); --columns-l-3: repeat(3, 1fr); --columns-l-2: repeat(2, 1fr); --columns-l-1: repeat(1, 1fr); --columns-m-3: repeat(3, 1fr); --columns-m-2: repeat(2, 1fr); --columns-m-1: repeat(1, 1fr); --columns-s-2: repeat(2, 1fr); --columns-s-1: repeat(1, 1fr); --columns-1-3: 1fr 3fr; --columns-3-1: 3fr 1fr; --columns-1-2: 1fr 2fr; --columns-2-1: 2fr 1fr; --columns-2-3: 2fr 3fr; --columns-3-2: 3fr 2fr;