Layout a webpage using css grid and flexbox

Isaac Mann
InstructorIsaac Mann
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today