DoAide Code

Guides · Updated 2026-10-23

CSS Grid explained: tracks, fr, minmax and template areas

Flexbox lays things out in a line. CSS Grid lays things out in two dimensions at once — rows and columns together — which is exactly what page layouts, dashboards and card galleries need. Grid has been supported in every major browser for years, yet many developers still reach for nested flex containers and margin hacks because the grid syntax looks intimidating.

It is smaller than it looks. This guide covers the handful of properties that build almost every real layout, then the recipes you will reuse. Build each one visually in the free CSS grid generator — set tracks and gaps, paint named areas onto a live grid, and copy the CSS and HTML.

Tracks: columns, rows and the fr unit

A grid starts with display: grid and a list of track sizes:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

minmax(), auto-fill and auto-fit: responsive without media queries

minmax(min, max) lets a track flex between two limits. Combined with repeat()’s auto keywords it produces the most useful line of CSS Grid:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

The browser fits as many 220px-or-wider columns as the container allows and stretches them to fill the row — four columns on a laptop, two on a tablet, one on a phone, with zero media queries.

Another everyday use: grid-template-columns: minmax(0, 1fr) instead of 1fr stops long words or code blocks from forcing a column wider than the screen.

Named template areas: draw the layout in your CSS

grid-template-areas lets you sketch the layout as text and place children by name:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Three rules to remember: every row string must have the same number of cells; a . marks an empty cell; and each name must form one filled rectangle — an L-shaped area makes the browser ignore the entire template. The grid generator checks that rule as you paint and tells you which area is broken.

The real payoff is responsive design: a media query only needs to redefine the map, and the HTML never changes.

@media (max-width: 640px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}

Grid or flexbox?

They are partners, not rivals. A simple rule of thumb:

Most real pages use both — a grid for the page shell, flexbox inside the header and cards. For the cards themselves, pair the layout with a consistent set of colors from the color palette generator and depth from the box shadow generator.

Build your CSS grid visually — free generator

Frequently asked questions

How do I create a CSS grid layout quickly?

Use the free generator at code.doaide.com/tools/css-grid-generator: set the number and size of columns and rows, adjust the gaps, paint named areas onto the live preview, and copy the generated CSS and HTML. It runs in your browser, no sign-up.

What does 1fr mean in CSS Grid?

fr is a fraction of the free space left in the grid container after fixed and content-sized tracks are placed. 1fr 1fr splits it equally; 2fr 1fr gives the first track twice as much.

Why is my grid-template-areas not working?

The usual causes: rows with different numbers of cells, an area name that does not form a single rectangle, or a child whose grid-area name does not match. Any of these makes the browser drop the whole template.

What is the difference between auto-fill and auto-fit?

Both create as many columns as fit. auto-fill keeps empty tracks when there are fewer items than columns, so items keep their size; auto-fit collapses the empty tracks so the existing items stretch to fill the row.

More guides