Grid

display: grid with grid-template-columns: repeat(3, 1fr) makes three equal columns; children fill them in order and wrap into new rows automatically. gap spaces both directions. fr is a fraction of the free space, so 2fr 1fr is a two-thirds/one-third split, and repeat(auto-fill, minmax(200px, 1fr)) makes as many 200px-plus columns as fit, which is the responsive card grid in one line.

Grid is for two-dimensional layout, whole page regions and galleries; flexbox for one-dimensional rows and columns. They nest happily.

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

Your task

Turn .gallery into a grid with three equal columns and an 8px gap.

Part of the final project. .gallery is the three-column gallery. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<style>
.tile { background: rgb(232, 239, 255); padding: 20px; text-align: center; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
</style>
</head>
<body>
<div class="gallery">
  <div class="tile">1</div><div class="tile">2</div><div class="tile">3</div>
  <div class="tile">4</div><div class="tile">5</div><div class="tile">6</div>
</div>
</body>
</html>