Grid Archetypes

A worked example: naming areas without breaking them

Holy Grail's exported CSS looks like this:

.layout {
  display: grid;
  grid-template-areas: "header header header" "nav main side" "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

Each quoted string in grid-template-areas is one row of the grid, and each word inside it is one column cell in that row. Repeating a word across cells, the way "header" fills all three columns in the first row, tells the grid to merge those cells into a single spanning area. A child element joins that area with grid-area: header, and the name has to match a word in the template string exactly, character for character, or the browser silently drops it into the next available spot in normal document order instead of raising an error.

That silent fallback is the actual failure mode people hit: rename a component's class from header to site-header without updating the CSS, and nothing breaks loudly. The element just stops participating in the named layout and stacks wherever the grid's automatic placement puts it, which can look like a completely unrelated bug if you're not looking at grid-template-areas at the time.

Why these archetypes use auto-fill, not auto-fit

Masonry and Dashboard both size their columns with repeat(auto-fill, minmax(240px, 1fr)) and repeat(auto-fill, minmax(280px, 1fr)). The minmax part sets each column's floor and ceiling: never narrower than the minimum, never wider than an equal share of the available space. The auto-fill part decides how many of those columns exist at all: as many as fit in the container at the minimum width, even if there isn't enough content to fill them.

The alternative keyword, auto-fit, only differs in what happens with leftover space: it collapses any columns that end up with no content into zero width and lets the remaining columns stretch to fill the gap. With auto-fill, a row of three cards in a grid sized for five columns leaves two empty, invisible tracks and the cards stay at their minmax width. With auto-fit, those same three cards would stretch wider to fill the whole row. Neither is more correct; it depends on whether a sparse row should look intentionally left-aligned (auto-fill) or should always fill the full width (auto-fit). Bento skips this decision entirely with a fixed repeat(4, 1fr), since a four-tile hero layout is meant to hold a specific number of tiles rather than reflow around an arbitrary count.