Columns Classes

Columns Classes

Here’s how to define these column structures as CSS variables for various breakpoints:

/* Define column variables for different breakpoints */

/* Base (Desktop and below) */
--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);

/* Extra Large Screen (1400px and below) */
--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);

/* Large Screen (992px and below) */
--columns-l-4: repeat(4, 1fr);
--columns-l-3: repeat(3, 1fr);
--columns-l-2: repeat(2, 1fr);
--columns-l-1: repeat(1, 1fr);

/* Medium Screen (768px and below) */
--columns-m-3: repeat(3, 1fr);
--columns-m-2: repeat(2, 1fr);
--columns-m-1: repeat(1, 1fr);

/* Small Screen (480px and below) */
--columns-s-2: repeat(2, 1fr);
--columns-s-1: repeat(1, 1fr);

/* Special Columns */
--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;

How to Use These Variables in Your CSS Grid Layout

Once these variables are set up, you can use them within grid layouts in your CSS, like so:

.grid-container {
    display: grid;
    gap: var(--space-m); /* Optional: Use a spacing variable here */
}

/* Default columns for desktop */
.grid-container {
    grid-template-columns: var(--columns-4); /* For example, a 4-column layout */
}

/* Responsive column layout based on screen width */
@media (max-width: 1400px) {
    .grid-container {
        grid-template-columns: var(--columns-xl-3); /* Adjust for 1400px and below */
    }
}

@media (max-width: 992px) {
    .grid-container {
        grid-template-columns: var(--columns-l-2); /* Adjust for 992px and below */
    }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: var(--columns-m-1); /* Adjust for 768px and below */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: var(--columns-s-1); /* Adjust for 480px and below */
    }
}

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;