Grid: a two-dimensional layout

CSS Grid is a two-dimensional layout mode: the container describes rows and columns, and its children fall into cells and named areas by themselves.

Rows and columns together

Flexbox lines items up on a single line: a row or a column. But a page layout and a grid of cards are made of rows and columns at once. For those there is grid. It reached browsers later than flexbox, in 2017, so on our time machine 2014 to 2019 is a single era of responsive layout, and we’ll use the most modern tool.

In grid you describe the grid on the container, and the children fall into the cells by themselves:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Three equal columns with space between them. The main words:

• a track is one column or one row;
• a line is the boundary between tracks (lines are numbered from one);
• a cell is the crossing of a row and a column;
• an area is a rectangle made of several cells.

The fr unit and the functions

• fr (fraction) is a share of the free space. 2fr 1fr makes two columns, the first twice as wide as the second;
• repeat(3, 1fr) means “three times 1fr”;
• minmax(14rem, 1fr) means “no narrower than 14rem, but stretch to fill the free space”;
• auto-fit inside repeat() means “as many columns as fit”.

Put together, repeat(auto-fit, minmax(14rem, 1fr)) gives a grid that decides its own number of columns: four on a wide screen, one on a narrow one, and no media query at all. Move the slider on the diagram and see.

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
  gap: 12px;
}

Notice minmax(0, 2fr) in the layout. A column of 1fr has a hidden problem: it won’t shrink below its content, so one long word can push the column out past the edge. minmax(0, …) allows it to shrink.

A layout in words: areas

The most vivid trick in grid is to describe a layout as text.

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
}

.page > header { grid-area: header; }
.page > main   { grid-area: main; }

The layout reads like a drawing, with words as the names of the areas. To rearrange it for a phone, you only rewrite grid-template-areas (one word per row) and leave the HTML alone. For our page we’ll draw just the main block and the side block.

A warning about order. Grid lets you place a block anywhere, whatever its position in the HTML, but keyboard order and screen reader order follow the markup. If the picture drifts far from the HTML order, a keyboard user will jump around the page. Keep the HTML in the order a person should read it.

Flexbox or grid

A simple rule: one row or one column means flexbox, and rows and columns together means grid. A menu, a header, an icon with a label: flexbox. A page layout, a grid of cards, a gallery: grid. They nest inside each other: grid for the frame of the page, flexbox inside a card. When in doubt, ask yourself: do I need items in different rows to line up in shared columns? If yes, grid.

Practice

You’re continuing the 2014 site. The flexbox layout works, but now you’ll replace it with grid. The layout needs columns and areas, and the cards need one line with auto-fit. The checks look at the properties of the containers, and at whether the main block has an area of its own.

Drag the width of the window: the cards change their number of columns by themselves. Then compare: how many lines did you write for the layout in flexbox, and how many in grid? What became clearer?

What was wrong with 2014

Before grid, people counted columns by hand: “this column is 31.5 percent and that one 65.5, because the rest is the gutter.” Frameworks such as Bootstrap offered a ready twelve-column grid and a crowd of col-md-4 classes, and the markup turned into layers of wrappers. Today the grid lives in CSS, and the HTML stays meaningful.