Embedded Files
Using CSS, you can elegantly lay out elements on a web page. There is no simple answer for how best to do this — depending on what content you are trying to display, multiple different techniques can work well. The Box Model and Display and Positioning explain some possible ways to style layout.
In this lesson, we introduce a powerful tool called CSS Grid. The grid can be used to layout entire web pages. Whereas Flexbox is mostly useful for positioning items in a one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing many tools for aligning and moving elements across both rows and columns.
By the end of this lesson, you will understand how to use these properties to create grid layouts:
grid-template-columns
grid-template-rows
grid-template
grid-template-area
row-gap / column-gap / gap
grid-row-start / grid-row-end
grid-column-start / grid-column-end
grid-area
That’s a lot to learn. But by the end, you’ll be a master at grid positioning. Let’s start learning!
Instructions
Instructions
When you’re ready to dive into CSS Grid, move on to the next exercise.
Page updated
Report abuse