KKS-25 — Grid

Target values from Figma (1280px artboard): container 1140px, horizontal gutter 60px from md up, content 1080px. Below md the gutter is 30px ($grid-gutter-width) — the design does not specify a mobile gutter.

Measure in the browser console:

var c=document.querySelector('.container'),s=getComputedStyle(c);
c.clientWidth - parseFloat(s.paddingLeft) - parseFloat(s.paddingRight)  // expect 1080

2 columns — 60px gap

Column 1 of 2

Left column. From lg up the gap is 60px. Figma »Frame 109« (node 258-4460, Flow Horizontal, Hug 1080px) measures 59px between its two columns, and 60px is also --bs-gutter-x — so columns and container padding sit on one rhythm.

Column 2 of 2

Right column. Each column is 510px: (1080 − 60) / 2. Below lg the two stack and the 60px becomes vertical spacing.

3 columns — 20px column gap, 50px row gap

Column 1 of 3

From md up the column gap tightens to 20px, per Figma »Frame 156« (node 303-19820) — a 3×3 grid in the same 1080px box at left 100px.

Column 2 of 3

Middle column — two 20px gaps flank it. Each column is 346.67px: (1080 − 2×20) / 3, which matches the 346.67px Figma reports for a card in that frame.

Column 3 of 3

The design tightens the column axis as columns multiply: wide 2-column content needs 60px of separation, a dense 3-up grid needs 20px. Row gap stays 50px.

4 columns — same 20px / 50px as 3 columns

1 of 4

2-up from md, 4-up from lg. Both are multi-column, so both take 20px.

2 of 4

Each column is 255px at lg: (1080 − 3×20) / 4.

3 of 4

Figma has no 4-column frame to sample — this follows the 3-column rule rather than inventing a value.

4 of 4

At md this wraps to 2×2 and the 50px row gap separates the rows.

Breakpoints after KKS-25

Resize the window and watch the container step through these:

sm 576px → container 540px
md 768px → 720px (gutter switches 30px → 60px here)
lg 992px → 960px
xl 1200px → 1140px, and stops growing
xxl 1400px → no wider container by design; breakpoint retained for component rules

Resolved — the column gap follows the column count

The open question was whether $contentcontainer-gap (30px) should become 60px to match Figma. Reading the file settled it: the design does not use one gap.

Figma frame	What it is	Column gap	Row gap
`258-4460` »Frame 109«	2-column content, Flow Horizontal, Hug 1080px	59px → 60px	—
`303-19820` »Frame 156«	3-column card grid, Flow Grid, 1080px at left 100px	20px	50px

Both sit exactly on the 1080px content box at left 100px that KKS-25 established, so both are authoritative — they differ because the column axis tightens as columns multiply.

So a container now takes its gap from its own column count, switching at the breakpoint where it actually splits:

2 columns   (from lg)   60px column / 60px row
3 columns   (from md)   20px column / 50px row
4 columns   (from md)   20px column / 50px row
6 columns   (from md)   20px column / 50px row
stacked     (below)     30px — pure vertical rhythm

Verify in the browser console:

[...document.querySelectorAll('.contentcontainer')].map(function (c) {
  var s = getComputedStyle(c);
  return c.dataset.containerIdentifier + ' → col ' + s.columnGap + ', row ' + s.rowGap;
});

The 4-column value has no Figma source — there is no 4-column frame in the file. It follows the 3-column rule rather than inventing a number; revisit if a 4-column design appears.