Instructor: 0:00 We've created the HTML structure that describes the content of this design. Now, we want to create the layout for this design using CSS Grid and Flexbox.
0:09 First, we'll make a link to a CSS file, and then we need to create that CSS file. I pulled up our design next to a browser that's pointing to the index.HTML page. Now, if we open up the web developer tools and go to Sources, we can type Command-P and type in style.CSS to directly edit the style file.
0:40 The first layout decision we'll make is how to lay out the overall sections. We'll put the along the top like this, the area will be along the right-hand side and the will be along the left-hand side. We can create this using a two-by-two grid with the spanning two columns across the top.
0:59 Here's how we'll write that. We'll make the body-display-grid. Now, we need to define the grid-template-areas. Here, we define names for our grid areas row by row, so the header will go here and here. Then, we'll have an section here and then section next to it.
1:24 We also need to define how tall each row is with grid-template-rows. The top row will be 100 pixels, and then the second row will be everything else. We'll decide how wide each column is with grid-template-columns. We'll make the columns adjust based on the width of the viewport.
1:46 We'll call the first column 30 percent of the viewport, and then the second column will be everything else, which is 70 percent.
1:55 Now, the content has been rearranged in different ways, but we actually want to assign specific sections to different areas of the grid. We'll say the is going to be in the grid area of header, the area will be in the grid area of main, and the will be in the grid area of aside.
2:22 Now, if we inspect these, you'll see this area is the bottom right. The is the bottom left, and then the goes across both cells along the top.
2:34 We're using the unordered list in lots of places in this document, but in none of those places do we want the bullet to be showing up.
2:42 Let's restyle all the unordered list items to have no margin and no padding, just to reset them, and then update the list items to also have no margin, have a list-style of none to get rid of that bullet point. We have a nice base to start from here.
3:11 We've set up the overall layout with CSS Grid with this two-by-two grid. We want to make the header so for the unordered list inside of the header, we'll give it a display: flex, and give it a height of 100 percent so it will match up the same height as the .
3:31 For each list item, we'll give it a flex: 1. We will expand to fill all the space with the same exact space for each list item. Then just for now, we'll give each of them a border and make them look like this rectangle here, so border and we'll give it a margin: 1px. To make sure we don't lose our work, we'll copy this and paste it into the styles file.
4:03 Now, we have our base layout all set up.