CSS Grid Cheat Sheet

Grids are just kind of naturally pleasing. They just seem to click in the human brain like other inventions of the modern world: white walls, musical scales, or clean floors. Harmony is good and we should use it.

N-Column Grid

Number of columns:

#n-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

Add item Remove item

Responsive N-Column Grid

Screen sizes can vary considerably and your phone’s constrained width will likely squish the above grid into something uncomfortably thin. So, let’s add some @media queries and make this thing as responsive as a spec’d out MacBook.

Number of columns:

#n-columns {
  display: grid;
  gap: 8px;
}

/* tablet size */
@media (min-width: 600px) {
  grid-template-columns: repeat(2, 1fr);
}

/* desktop size */
@media (min-width: 1000px) {
  grid-template-columns: repeat(4, 1fr);
}

Desktop (1000 pixels or more):

Tablet (600 pixels to 999 pixels wide):

Mobile (less than 600 pixels):

“Holy Grail” Page Layout

So-called because it was lusted after by many web developers—and for the first decades of the web it was ludicrously difficult to achieve. Grid makes it ludicrously easy.

#holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
header,
footer {
  grid-column: 1 / 4;
}