CSS Grid

Lay a page out in rows and columns at the same time.

Where flexbox handles one direction, grid handles two. Use it for page layouts and galleries of cards.

Edit the CSS

Preview

A responsive grid in one line

This fits as many columns of at least 200px as the screen allows, with no media queries.

CSS

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

Named page areas

CSS

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

← Flexbox Responsive design →