Build a grid without guessing

Begin with the content

Before choosing a column count, write down what each region contains. A short navigation label and a long article do not need equal space. For a reading page, start with an article track twice as wide as a sidebar: 2fr 1fr.

The fr unit shares remaining space after fixed tracks and gaps are accounted for. It is not a percentage of the container. Three 1fr tracks with a 20px gap do not each occupy one third of the container plus the gaps; the gaps are removed first.

Give long content room to shrink

An equal grid often starts with repeat(3, minmax(0, 1fr)). The zero minimum matters: a long URL or code sample should not force a track wider than its share. Add overflow-wrap: anywhere to text that can contain long unbroken strings.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cards > * {
  overflow-wrap: anywhere;
}

Name regions when names explain the layout

A named-area sketch can communicate a page structure more clearly than numeric line positions. A name repeated across adjacent cells spans that rectangle. Every row must have the same number of cells, and each named region must remain rectangular. Use . for an empty cell.

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "header header" "article aside";
  gap: 24px;
}
header {
  grid-area: header;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}

Let the content choose the breakpoint

Slowly narrow the viewport. Watch for the point where a card's text becomes awkward or the sidebar feels squeezed. That is evidence for a breakpoint, and more useful than choosing a width only because it resembles a phone.

At a narrow width, switch to one column and clear the old named-area matrix. The source order should already make sense, because visual rearrangement does not change reading or keyboard order.

Try one change