Layout with grid
Flexbox lines things up in one direction. display: grid places items in rows and columns, which is perfect for galleries and card layouts.
grid-template-columns sets the columns. 1fr 1fr 1fr means three equal columns, each one fr wide, and repeat(3, 1fr) says the same thing more briefly.
gap adds space between rows and columns, just like in flexbox.
Example
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid div { background: #c7d2fe; padding: 16px; text-align: center; }
</style>
<div class="grid">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>The grid wraps onto a new row automatically once a row is full.
Your tasks
0 of 3 done- Make .gallery a grid
- Give it 3 equal columns
- Add a gap between the photos
Tutor
The tutor guides you toward the answer instead of handing it over. It uses your own Claude usage.
Quick check
What does grid-template-columns: 1fr 2fr do?
No problems found. Unclosed tags, missing semicolons and errors show up here in plain words.