03 / Layout primitives

Seven primitives. Almost no breakpoints.

Every demo below is live — drag the window narrower and watch. Nothing here uses a media query. fr distributes leftover space, minmax and clamp set the boundaries, and the browser resolves the rest. Breakpoints only appear where a layout must genuinely change shape rather than reflow.

Column grid — 4 / 8 / 12

Page composition starts at four columns and doubles, then adds half again: four on phones, eight on tablets, twelve on desktop. Four is the right floor because it is the smallest count that still divides usefully — halves and quarters — and because eight columns on a 375px screen gives you 30px tracks that no content fits into.

--se-grid-columns: 4;
--se-grid-gutter:  var(--se-space-4);
--se-grid-margin:  clamp(1rem, 4vi, 2rem);

[data-se="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--se-grid-columns), minmax(0, 1fr));
  gap: var(--se-grid-gutter);
  padding-inline: var(--se-grid-margin);
}

@media (--se-bp-md) { :root { --se-grid-columns: 8;  } }
@media (--se-bp-lg) { :root { --se-grid-columns: 12; } }

Two media queries, and they are the only ones in the system. Worth being honest about why they earn an exception: a column count is a discrete decision, not a continuous one. There is no such thing as 7.4 columns, so no amount of clamp or fr can interpolate between four and eight. Everything the column grid holds still sizes itself intrinsically — the grid decides where things sit, never how big they are. Component-level layout uses the intrinsic primitives below and needs no breakpoints at all.

display: grid;
gap: var(--se-space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--se-col-min)), 1fr));

display: grid;
gap: var(--se-space-4);
grid-template-columns: minmax(min(100%, var(--se-sidebar-min)), 1fr) 3fr;

display: flex;
flex-wrap: wrap;
gap: var(--se-space-4);
/* children */
flex: 1 1 calc((var(--se-switch-at) - 100%) * 999);

display: flex;
flex-wrap: wrap;
gap: var(--se-space-2);
align-items: center;