css · level 2 · unit 3 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
shares out a grid's free space, a bit like flex-grow.
Fixed columns do not fit every screen. The fr unit means one share of the free space. 1fr 1fr makes two equal columns that stretch with the page, however wide it is.
Mix them: 160px 1fr is a 160px sidebar and a main column that takes the rest. 1fr 2fr gives the second column two shares for every one.
saves typing: repeat(4, 1fr) means 1fr 1fr 1fr 1fr. It is a , a named tool with round brackets after it, that works out a value for you.
<div class="layout">
<div class="side">Filters</div>
<div class="main">Search results</div>
</div>.layout {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
}
.side {
background-color: lightgray;
}
.main {
background-color: aliceblue;
}Press show my page to see it here.
The sidebar stays 160px on every screen, while the main column stretches and shrinks.
guess first
1fr 2fr 1fr. Which column is widest?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="row">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>.row {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 8px;
}
.box {
padding: 12px;
background-color: lightsalmon;
}your turn
Your turn. Four equal columns.
Use repeat() to give the grid four equal columns that share the width between them.
the page you’re styling
<div class="year">
<div class="quarter">Q1</div>
<div class="quarter">Q2</div>
<div class="quarter">Q3</div>
<div class="quarter">Q4</div>
</div>your css
Press show my page to see it here.
- the columns use
repeat()not checked yet - there are four columnsnot checked yet
fix it
The sidebar should stay 150px while the rest stretches. Fix it!
the page you’re styling
<div class="shop">
<div class="side">Sizes</div>
<div class="main">Shoes</div>
</div>your css
Press show my page to see it here.
- a 150px sidebar and one more columnnot checked yet
- the second column takes one sharenot checked yet
- The browser skipped the column list. Which size is missing something?
- A share of the free space needs the
frunit, like1fr. - Change
1to1fr, then press run.
nailed it
you shared a grid out fairly. :D
fris one share of a grid's free space.160px 1frmixes a fixed column with a stretchy one.repeat(4, 1fr)writes the same track four times.
new words in your collection
- fr
- function
- repeat()
This lesson isn’t saved. A free account remembers every lesson you finish.