Column Start Position

Column Start Position

Here is a list of CSS variables for column start positions based on your specifications, formatted for easy pasting into Bricks Builder’s CSS Variables section.

Each variable represents a column start position at different breakpoints.

/* Column Start Position - Desktop */
--c-col-start-6: 6;
--c-col-start-5: 5;
--c-col-start-4: 4;
--c-col-start-3: 3;
--c-col-start-2: 2;
--c-col-start-1: 1;

/* Column Start Position - 1400px and Less (Extra Large) */
--c-col-start-xl-6: 6;
--c-col-start-xl-5: 5;
--c-col-start-xl-4: 4;
--c-col-start-xl-3: 3;
--c-col-start-xl-2: 2;
--c-col-start-xl-1: 1;

/* Column Start Position - 992px and Less (Large) */
--c-col-start-l-6: 6;
--c-col-start-l-5: 5;
--c-col-start-l-4: 4;
--c-col-start-l-3: 3;
--c-col-start-l-2: 2;
--c-col-start-l-1: 1;

/* Column Start Position - 768px and Less (Medium) */
--c-col-start-m-6: 6;
--c-col-start-m-5: 5;
--c-col-start-m-4: 4;
--c-col-start-m-3: 3;
--c-col-start-m-2: 2;
--c-col-start-m-1: 1;

/* Column Start Position - 480px and Less (Small) */
--c-col-start-s-6: 6;
--c-col-start-s-5: 5;
--c-col-start-s-4: 4;
--c-col-start-s-3: 3;
--c-col-start-s-2: 2;
--c-col-start-s-1: 1;

How to Use in Bricks Builder

Paste the Variables: Copy all the lines and paste them into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
Using the Variables in CSS:
- In your grid container, use grid-column-start to apply column start positions based on the screen size. For example:

grid-column-start: var(--c-col-start-3);

These variables allow easy control over the column starting positions across different screen sizes, giving you a responsive and structured layout 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;