css · level 2 · unit 3 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
grid-column lets one child cover several columns.
Between and around every track runs a numbered . Three columns have four lines: line 1 down the left edge, line 4 down the right.
grid-column: 1 / 3 places a child from line 1 to line 3, across two columns. says the same without picking lines: cover two columns, starting wherever it lands.
grid-row does the same for rows, and grid-template-rows sets row heights the way grid-template-columns sets widths, like 120px 80px.
<div class="news">
<div class="story big">Cat elected mayor</div>
<div class="story">Rain on Tuesday</div>
<div class="story">Bake sale</div>
<div class="story">New library</div>
</div>.news {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.big {
grid-column: span 2;
}
.story {
padding: 12px;
background-color: oldlace;
}Press show my page to see it here.
Change span 2 to span 3 and the big story takes the whole first row.
guess first
grid-column: 1 / 4 in three columns. How wide is the banner?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="grid">
<div class="banner">Summer sale</div>
<div>Hats</div>
<div>Shorts</div>
<div>Sandals</div>
</div>.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.banner {
grid-column: 1 / 4;
background-color: gold;
}your turn
Your turn. Make the top story big.
Use span in both blanks so the hero story covers two columns and two rows.
the page you’re styling
<div class="grid">
<div class="story hero">Dog learns to skateboard</div>
<div class="story">Sunny weekend</div>
<div class="story">Football results</div>
<div class="story">Garden show</div>
<div class="story">Film night</div>
</div>your css
Press show my page to see it here.
- the hero covers two columnsnot checked yet
- the hero covers two rowsnot checked yet
fix it
The footer should run along the whole bottom. Fix it!
the page you’re styling
<div class="page">
<div>News</div>
<div>Sport</div>
<div>Weather</div>
<div class="footer">Contact us</div>
</div>your css
Press show my page to see it here.
- the footer starts at the left edgenot checked yet
- the footer reaches the right edgenot checked yet
- The footer stops one column short. Count the lines, not the columns.
- Three columns have four grid lines, and the right edge is the last one.
- Change
1 / 3to1 / 4, then press run.
nailed it
you made children span the grid. :D
- Grid lines are numbered from 1, one more than the tracks.
grid-column: 1 / 3runs from line 1 to line 3.span 2covers two tracks, starting wherever it lands.
new words in your collection
- grid line
- span
This lesson isn’t saved. A free account remembers every lesson you finish.