Column Sizing

Column Sizing

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

Each variable represents a different column span, with values defined in the repeat() format for grid layouts. You can adjust these in your grid settings.v

/* Column Sizing - Desktop Column Span */
--c-col-span-6: repeat(6, 1fr);
--c-col-span-5: repeat(5, 1fr);
--c-col-span-4: repeat(4, 1fr);
--c-col-span-3: repeat(3, 1fr);
--c-col-span-2: repeat(2, 1fr);
--c-col-span-1: repeat(1, 1fr);

/* Column Sizing - 1400px and Less (Extra Large) */
--c-col-span-xl-6: repeat(6, 1fr);
--c-col-span-xl-5: repeat(5, 1fr);
--c-col-span-xl-4: repeat(4, 1fr);
--c-col-span-xl-3: repeat(3, 1fr);
--c-col-span-xl-2: repeat(2, 1fr);
--c-col-span-xl-1: repeat(1, 1fr);

/* Column Sizing - 992px and Less (Large) */
--c-col-span-l-6: repeat(6, 1fr);
--c-col-span-l-5: repeat(5, 1fr);
--c-col-span-l-4: repeat(4, 1fr);
--c-col-span-l-3: repeat(3, 1fr);
--c-col-span-l-2: repeat(2, 1fr);
--c-col-span-l-1: repeat(1, 1fr);

/* Column Sizing - 768px and Less (Medium) */
--c-col-span-m-6: repeat(6, 1fr);
--c-col-span-m-5: repeat(5, 1fr);
--c-col-span-m-4: repeat(4, 1fr);
--c-col-span-m-3: repeat(3, 1fr);
--c-col-span-m-2: repeat(2, 1fr);
--c-col-span-m-1: repeat(1, 1fr);

/* Column Sizing - 480px and Less (Small) */
--c-col-span-s-6: repeat(6, 1fr);
--c-col-span-s-5: repeat(5, 1fr);
--c-col-span-s-4: repeat(4, 1fr);
--c-col-span-s-3: repeat(3, 1fr);
--c-col-span-s-2: repeat(2, 1fr);
--c-col-span-s-1: repeat(1, 1fr);
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, set grid-template-columns to one of these variables depending on the layout requirements and screen size. For example:
grid-template-columns: var(--c-col-span-3);

These CSS variables give you responsive control over the grid layout, allowing you to quickly apply different column spans across screen sizes. Adjust the variable names as needed to match your project’s naming conventions.

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;