css · level 2 · unit 4 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
and let a grid count its own columns.
minmax(180px, 1fr) makes a track at least 180px wide, and at most one share of the free space.
Put it in repeat() with auto-fit where the number goes: repeat(auto-fit, minmax(180px, 1fr)). The grid fits in as many 180px columns as it can, then stretches them to fill the row.
A phone gets one column, a tablet three or four, a wide screen even more. It reflows like flex cards do, but every column lines up.
<div class="cards">
<div class="card">Cats</div>
<div class="card">Dogs</div>
<div class="card">Birds</div>
<div class="card">Fish</div>
</div>.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.card {
padding: 20px;
background-color: mintcream;
}Press show my page to see it here.
No media query in sight, yet the number of columns changes with the screen.
guess first
A grid 300px wide. How many columns does it make?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="grid">
<div class="cell">A</div>
<div class="cell">B</div>
<div class="cell">C</div>
<div class="cell">D</div>
<div class="cell">E</div>
</div>.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 8px;
width: 300px;
}
.cell {
background-color: lightblue;
}your turn
Your turn. A gallery that counts its own columns.
Fill in repeat() so the gallery fits as many columns as it can, each at least 150px and at most one share.
the page you’re styling
<div class="gallery">
<div class="pic">Beach</div>
<div class="pic">Forest</div>
<div class="pic">City</div>
<div class="pic">Desert</div>
<div class="pic">Lake</div>
<div class="pic">Hills</div>
</div>your css
Press show my page to see it here.
- columns of at least 150px fit themselvesnot checked yet
fix it
The grid shows one long column everywhere. Fix it!
the page you’re styling
<div class="cards">
<div class="card">Swimming</div>
<div class="card">Tennis</div>
<div class="card">Climbing</div>
<div class="card">Archery</div>
</div>your css
Press show my page to see it here.
- the grid still uses
auto-fitnot checked yet - the smallest size comes firstnot checked yet
- The browser skipped the whole column list. Look inside
minmax(). - The smallest value comes first, and
fris only allowed as the largest. - Swap them round to
minmax(200px, 1fr), then press run.
nailed it
your grid counts its own columns. :D
minmax(200px, 1fr)keeps a track between two sizes.repeat(auto-fit, …)fits in as many tracks as there is room for.- In
minmax(), the smallest value comes first.
new words in your collection
- minmax()
- auto-fit
This lesson isn’t saved. A free account remembers every lesson you finish.