CSS Grid Layout

Grid lays out items in rows and columns at once. grid-template-columns defines the columns, with the fr unit sharing the free space. grid-template-areas names regions in a drawing-like way, and grid-area places an element in a region. For a gallery, repeat(auto-fit, minmax(10rem, 1fr)) creates as many columns of at least 10rem as fit, so the grid reflows without media queries. Use Grid for page layout and two-dimensional arrangements, and flexbox for a single row or column of items.

.layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}
.layout > header { grid-area: header; }
.layout > nav { grid-area: sidebar; }
.layout > main { grid-area: main; }
.layout > footer { grid-area: footer; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}