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!