CSS Grid

CSS Grid Layout is a two-dimensional layout system that places content in rows and columns at the same time. It is enabled with display: grid, and the columns and rows are defined with grid-template-columns and grid-template-rows.

The fr unit shares the free space (1fr 2fr gives one third and two thirds), repeat() and minmax() build responsive grids without media queries, and grid-template-areas names regions such as header, sidebar and main. Grid is best for whole page layouts and card galleries, while Flexbox suits a single row or column.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}