CSS Grid

Rows and columns together

Flexbox handles one direction. Grid handles two: rows and columns. Use flexbox for a line of things (a toolbar), and grid for a whole area (a page layout or a gallery).

Defining columns

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* three equal columns */
  gap: 16px;
}
/* same thing, shorter */
.gallery { grid-template-columns: repeat(3, 1fr); }

The fr unit divides the free space into shares. 2fr 1fr gives the first column two shares and the second one share. You can mix units: 250px 1fr makes a fixed sidebar and a flexible main area.

The magic responsive line

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

minmax(200px, 1fr) means "at least 200px, at most one share". auto-fit creates as many columns as fit in the row. On a phone you get one or two columns, on a laptop four or five, with no media queries at all.

Spanning and areas

.featured { grid-column: span 2; }  /* this card is two columns wide */

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

Grid or flexbox?