From Mockup to Webpage
Layout a webpage using css grid and flexbox
CSS Grid and Flexbox are very useful tools for providing the overall layout of a page. I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.
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 <header> along the top like this, the <main> area will be along the right-hand side and the <aside> will be along the left-hand side. We can create this using a two-by-two grid with the <header> 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 <aside> section here and then <main> 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 <header> is going to be in the grid area of header, the <main> area will be in the grid area of main, and the <aside> will be in the grid area of aside.
[2:22] Now, if we inspect these, you'll see this <main> area is the bottom right. The <aside> is the bottom left, and then the <header> 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 <header>.
[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.