Grid basics

grid-template-columns: repeat(3, 1fr) makes three equal columns in one line, and the browser places every child into the next free cell.

Rows and columns at once

Grid, the CSS Grid Layout module, is built for two-dimensional layout: rows and columns together. You draw the grid on the container and the items fall into its cells. Where flexbox starts from the items and lets them work out their sizes, grid starts from the layout and fits the items into it. That makes it the natural tool for photo galleries, card listings, and the overall shape of a page with a header, a sidebar, the main content and a footer.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Tracks and the fr unit

grid-template-columns lists the width of each column, called a track. You can use any length, such as 200px 1fr, but grid adds a unit of its own: fr, one fraction of the free space. 1fr 1fr 1fr makes three equal columns; 2fr 1fr makes the first column twice as wide as the second. The fr unit shares out only the space that is left after fixed tracks and gaps, so 200px 1fr gives a 200 pixel sidebar and lets the main column take the rest. repeat(3, 1fr) is a shorter way to write 1fr 1fr 1fr. grid-template-rows does the same for rows, but often you leave rows alone and let them be as tall as their content.

Placing items

By default, items fill the grid in source order, one cell each, left to right and then onto the next row. To make an item bigger, grid-column: span 2 lets it cover two columns, and grid-row: span 2 two rows. The lines between tracks are numbered from 1, so a three-column grid has lines 1 to 4, and grid-column: 1 / 3 means from line 1 to line 3. grid-column: 1 / -1 stretches an item across the whole width, because negative numbers count from the end.

Naming areas

For a page layout, grid-template-areas lets you draw the layout with words. Each quoted string is one row and each word is one cell; repeating a word makes an area span those cells. Then each item gets grid-area with the matching name. The layout below reads almost like a sketch: the header across the top, a sidebar and the main content side by side, and the footer at the bottom. Changing the layout for a phone means rewriting only these few strings, often inside a media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Columns that fit the screen

One pattern from MDN's grid guides is worth memorising: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) says each column must be at least 150 pixels and may grow to share the space, and auto-fill creates as many columns as fit. The result is a gallery that shows two columns on a phone and five or six on a wide screen, again without a media query. As with flexbox, grid can place items in a different order from the HTML, and the same caution applies: keep the reading order and the visual order the same.