Box model, Flexbox, and Grid

* { box-sizing: border-box; }

.nav { display: flex; justify-content: space-between; gap: 16px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

Flexbox for one-dimensional layouts (a row of nav links, a button group). Grid for two-dimensional layouts (a card gallery, a page skeleton). Most real pages use both together, nested inside each other.