Grokking CSS for Web Development
0% completed
Defining columns and rows
Three columns of 200px always add up to 630px, whether the window is 375px or 1,920px wide. In the gallery from the previous lesson, that left 610px of each row empty on a wide screen. In a 375px phone window it does the opposite: the gallery cannot fit, and the page becomes 650px wide and scrolls sideways. The two properties in this lesson, grid-template-columns and grid-template-rows, decide how big each track is, and choosing the right units fixes both problems.
The examples change the gallery page from the previous lesson. Delete the `.featured
.....
.....
.....
Like the course? Get enrolled and start learning!
Reading Progress
0%