v139 · css

Responsive Grid System

A complete grid toolkit built from @function rules: column-width calculation, fluid type scaling, and spacing-scale generation — all computable in CSS without preprocessors or JavaScript class logic.

Feature detection: checking…
Note: CSS custom functions (@function) are not supported in this browser. Use Chrome 139+ for the full demo.

live grid

Adjust column count and gap density — the grid recalculates using CSS custom functions only.

fluid type via --fluid-size()

Resize the browser window — heading and body type scale fluidly between min and max bounds.

The quick brown fox jumps over the lazy dog
CSS custom functions let you encapsulate fluid type logic once and reuse it everywhere. The heading above uses font-size: --fluid-size(1.2rem, 3rem, 320px, 1280px) — a single call that replaces the three-property clamp pattern.

column-width calculator

--col-width(--cols, --total, --gap) computes the pixel width of a column span — useful for canvases, charts, and absolutely-positioned overlays that need to match a CSS grid.

/* Column span calculator */
@function --col-width(--cols <integer>, --total <integer>, --gap <length>) {
  result: calc(
    (100% - (var(--total) - 1) * var(--gap)) / var(--total) * var(--cols)
    + (var(--cols) - 1) * var(--gap)
  );
}

/* Fluid type: min at 320px viewport, max at 1280px */
@function --fluid-size(--min <length>, --max <length>, --at-min <length>, --at-max <length>) {
  result: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * ((100vw - var(--at-min)) / (var(--at-max) - var(--at-min)))),
    var(--max)
  );
}

/* Spacing scale */
@function --stack-space(--step <integer>) {
  result: calc(0.25rem * var(--step));
}

/* Usage */
.sidebar { width: --col-width(3, 12, 16px); }
h1       { font-size: --fluid-size(1.25rem, 3rem, 320px, 1280px); }
.card    { padding: --stack-space(4); gap: --stack-space(2); }

see also