Dynamic Grid Columns with Jeet: CSS Variables for Responsive Layouts

Problem

Designing a fluid grid that adapts to multiple viewports usually means writing a lot of CSS for each breakpoint. You rewrite widths, margins, and flex‑basis values manually, and any change forces a refactor of the entire stylesheet.

Thesis

Jeet solves this by turning column widths into CSS custom properties. The grid system automatically generates the flex‑basis and max‑width values from those properties, so a single change at a breakpoint ripples through the whole layout without touching individual rules.

What Jeet’s Dynamic Columns Actually Do

Jeet uses a variable called --jeet-col-width (default 8.3333%) to represent the width of a single column in a 12‑column grid. The mixins jeet-columns() and jeet-gutter() set up this variable and any other spacing properties. When the variable changes, the mixins recalc the flex-basis and max-width for every column automatically.

Setting Up the Grid

1. Include Jeet’s core SCSS (or CSS) file in your project.
2. Define the number of columns you want. The default is 12, but you can change it:

// _jeet.scss – set 8 columns instead of 12
@include jeet-columns(8);

After this mixin runs, Jeet creates --jeet-col-width as calc(100% / 8) and stores it in the :root selector.

Breakpoint Logic

Because --jeet-col-width is a CSS variable, you can override it inside media queries. Jeet’s mixins will read the new value automatically.

@media (min-width: 768px) {
  :root {
    --jeet-col-width: calc(100% / 12); /* switch to 12 columns on tablets */
  }
}

Notice that you only modify the variable; Jeet’s generated CSS for .jeet-grid__col (the column class) remains untouched.

Concrete Worked Example

Below is a minimal HTML + SCSS snippet that demonstrates a 6‑column layout on mobile and a 12‑column layout on tablets.

// styles.scss
@import "jeet";
@include jeet-columns(6); // mobile default

.jeet-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.jeet-grid__col {
  padding: 0 0.5rem;
  flex: 0 0 var(--jeet-col-width);
  max-width: var(--jeet-col-width);
}

@media (min-width: 768px) {
  :root {
    --jeet-col-width: calc(100% / 12);
  }
}

When the viewport is narrower than 768 px, each column takes calc(100% / 6) (~16.67%). Once the viewport reaches 768 px, the variable changes to calc(100% / 12) (~8.33%), and every column automatically shrinks to that width.

Trade‑offs & Limitations

• Browser support: CSS variables are not supported in IE11 or older. Modern browsers (Edge 18+, Chrome 55+, Firefox 49+, Safari 10.1+) handle them fine.
• Complexity: A large grid with many custom properties can make the stylesheet harder to read. Group related variables inside a dedicated namespace if you have many grids.
• Debugging: Because the values are computed at runtime, inspecting the final flex-basis in dev tools shows the computed percentage, not the original variable.

Verify & Debug

1. Open the page in a modern browser and use the dev tools’ Computed tab to look for --jeet-col-width on the :root element.
2. Resize the viewport and watch the flex-basis of a column change from calc(100% / 6) to calc(100% / 12) without a page reload.
3. For automated checks, render the component in Jest with jsdom and assert that window.getComputedStyle(col).flexBasis matches the expected value for each breakpoint.

Take‑away

Jeet’s custom‑property‑based grid lets you tweak column widths at breakpoints with a single line of CSS. This keeps your stylesheet lean, reduces JavaScript overhead, and makes responsive design a matter of re‑defining variables—no rewriting of the grid rules themselves.