CSS Academy · Lesson

Display Grid and Template Columns Rows

Enable CSS Grid and define column and row tracks using grid-template-columns and rows.

Enabling CSS Grid

CSS Grid is activated with display: grid on a container. Its direct children become grid items automatically placed into cells.

.layout {
  display: grid;
}

grid-template-columns defines the number and size of columns. Each value creates one column track.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  /* 3 columns: 200px fixed, two equal flexible columns */
}