Grid

Columns that wrap by themselves

Name the narrowest a card may be and let the grid fit as many as the row holds. On a wide screen there are four, on a phone there is one, and nothing in between needs a media query. The min(100%, 220px) stops a single column from ever being wider than its container.

.grid { display: grid; gap: var(--tui-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

When the columns must be fixed

A dashboard with a main column and a rail names its columns: minmax(0, 1fr) for the part that gives, a fixed width for the part that does not. The minmax(0, …) is what lets a long word or a wide table shrink instead of pushing the page sideways. Put a part that needs a fixed shape on a grid with the same gap as its neighbours (16px between panels in a dashboard).

.dashboard { display: grid; gap: var(--tui-4); grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 800px) { .dashboard { grid-template-columns: minmax(0, 1fr); } }

Rules

• Use gap, never margins between cells, and take it from the scale.
• Prefer auto-fit with minmax(min(100%, N), 1fr) to a column count set by breakpoint.
• Always write minmax(0, 1fr) rather than 1fr where the content can be wider than the track.
• Align to the grid, not to the content: panels in a row share one top edge and one height unless there is a reason.