Grid: two dimensions

Flexbox handles one line at a time: each row of a wrapped flexbox sizes itself, so the columns don't line up from row to row. Grid works in two dimensions at once: you define the columns and rows, and every item snaps into the same structure.

Rule of thumb: rows and columns that must line up → grid. One line of items sized by their content, like a row of buttons → flexbox.

.gallery {
  display: grid;
  grid-template-columns: 200px 400px;
  gap: 1rem;
}

• display: grid makes a grid container; its direct children become grid items.
• grid-template-columns defines the column tracks; grid-template-rows the rows.
• gap sets the space between rows and columns (gap: 1rem 2rem = row gap, column gap).