Row Start Position

Row Start Position

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

Each variable represents a row start position at different breakpoints.

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

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

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

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

/* Row Start Position - 480px and Less (Small) */
--c-row-start-s-6: 6;
--c-row-start-s-5: 5;
--c-row-start-s-4: 4;
--c-row-start-s-3: 3;
--c-row-start-s-2: 2;
--c-row-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-row-start to apply row start positions based on the screen size. For example:
grid-row-start: var(--c-row-start-3);

These variables allow easy control over the row starting positions across different screen sizes, providing responsive control over 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;