Start a Grid layout

Grid defines a two-dimensional coordinate system of rows and columns.

.features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

The declaration creates three explicit column tracks. Four numbered grid lines surround them, and cells appear where row and column tracks cross.

Direct children become grid items. Without explicit placement, the auto-placement algorithm fills available cells in source order and creates implicit rows when needed.

fr represents a fraction of leftover space after non-flexible tracks and gaps are resolved. Intrinsic content minimums can still make a track wider than an equal fraction, which is why a long unbreakable value can upset apparently equal columns.

Grid controls the items, not all descendants. A nested child participates in its grid item’s layout unless you deliberately create another grid.

Enable the Grid overlay in DevTools. Show line numbers and track sizes, then add a fourth item. The overlay makes the explicit columns, implicit row, gaps, and auto-placement order visible.