An image gallery with 2 columns of images.

The old way is to:

  1. Float each image left,
  2. Assign the width of each as a percentage of the total gallery width,
  3. Give odd-numbered images a right margin,
  4. Clear both on even-numbered images,
  5. Pray everything lines up.

With CSS grid:

  1. Display the gallery container as a 2-column grid at 1fr 1fr and a grid-gap of 30px.

.gallery { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; }