Other Spacing & Sizing

Other Spacing & Sizing

Here’s a complete list of CSS variables for other spacing and sizing classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. This includes variables for gaps between columns, maximum width, and owl spacing.

/* Gaps Between Columns */
--c-columns-gap-xs: 0.25rem; /* Adjust value as needed */
--c-columns-gap-s: 0.5rem;
--c-columns-gap-m: 1rem;
--c-columns-gap-l: 1.5rem;
--c-columns-gap-xl: 2rem;
--c-columns-gap-xxl: 3rem;

/* Element Max Width */
--c-max-width-320: 320px;
--c-max-width-480: 480px;
--c-max-width-640: 640px;
--c-max-width-960: 960px;
--c-max-width-1120: 1120px;

/* Owl Spacing */
--c-owl-xs: 0.25rem;
--c-owl-s: 0.5rem;
--c-owl-m: 1rem;
--c-owl-l: 1.5rem;
--c-owl-xl: 2rem;
--c-owl-xxl: 3rem;
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:
    • Gaps Between Columns: Use gap in a grid or flex layout
gap: var(--c-columns-gap-m);

Element Max Width: Set max-width on containers.

max-width: var(--c-max-width-640);

Owl Spacing: Use for spacing between repeated items, like list items.

margin: var(--c-owl-m);

These variables provide a flexible, responsive spacing and sizing system for use throughout your layouts in Bricks Builder. Adjust the values to fit your project’s design needs.

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;