# Grid

CSS grid on the 4px scale. Columns that fill the space and wrap by themselves, so there is no breakpoint to maintain.

Foundation · Free · https://tactileui.dev/docs/foundations/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.

Berths14Fuel6Power22Water9

```
.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.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `grid-and-spacing.md`, written for an agent to follow. It ships with the Kit.