Transcript

0:00 What I'd like to do now is show a common use case, a common layout that we could build using a lot of what we've already learned.

0:06 We'll put some of the pieces together. We're still just working with colored boxes, although technically these boxes, underlying the color boxes are actual HTML elements like a header, a footer, an article, a side, a nav, all of that stuff.

0:21 At the end of the day, there's just not content in there. If we look at the layout, we'll start with a mobile size, everything collapses down to a single column. We've got a header, we've got some Nav content, an article, sidebar, advertising, footer.

0:36 As I expand, our layout changes. We still have our header and our Nav up top, but now, there's a sidebar that is sharing space with the main article. We have advertising sharing space with the footer.

0:49 Then, just the third time, right there, now the footer goes all the way across, and then our Nav shares the space with the main article, and the sidebar and advertising share space as well.

1:02 We move to a completely different layout from a single column to a couple of columns, two columns, not equal size, but two different columns to a three-column layout here.

1:16 Here's our first column, our second big column, and our third small column and things are moving around. We have two options, of course, with how we build this.

1:24 We could do this using grid lines and place things that way or we can use grid areas. My preference is to stick with grid areas. In the next video, we'll start by working on this layout, the simplest one, just a single column.

lesson

Overview of a Common Layout

Here's an example of a common layout that can be created with CSS Grid.

The layout uses colored boxes, which represent actual HTML elements like headers, footers, articles, sidebars, and navigation.

When viewed at a mobile size, the layout collapses into a single column in the following order:

Transcript

0:00 What I'd like to do now is show a common use case, a common layout that we could build using a lot of what we've already learned.

0:49 Then, just the third time, right there, now the footer goes all the way across, and then our Nav shares the space with the main article, and the sidebar and advertising share space as well.

1:02 We move to a completely different layout from a single column to a couple of columns, two columns, not equal size, but two different columns to a three-column layout here.

1:16 Here's our first column, our second big column, and our third small column and things are moving around. We have two options, of course, with how we build this.