Intermediate
A gallery that picks its own column count
Make .gallery a grid whose columns are at least 150px wide, share any extra space, and change in number automatically as the gallery gets wider or narrower. Use a 16px gap. No media queries.
When the gallery is narrower than 150px, it must show a single column that doesn't overflow.
What Check tests
- At 700px wide, 4 tiles fit in the first row
- At 340px wide, 2 tiles fit in the first row
- Tiles stretch to fill the row
- At 120px wide, one column and no overflow
- The gap is 16px
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.