Build a Navigation Bar with CSS Grid Using grid-auto-flow
Another common layout you'll run into with almost every website that you build is a navbar. CSS Grid has your back on this as well.
In our nav, we'll turn on display: grid and set grid-auto-flow to the column to have our nav items align themselves into one row.
The trick to aligning the logo to the left and the items to the right is to set grid-template-columns to 1fr which will push the links to the right. We'll apply some additional styles to make it look exactly how we'd like it.
Lesson Challenge
We have all of our links displaying in our header by default. Try creating a Hamburger 🍔 menu with CSS grid!
Instructor: [0:00] This format navigation bar is another popular layout feature. It has a logo or your name to the far left and then the rest of the navigation aligned to the right. Let's see how we can make this happen using CSS Grid.
[0:12] Here's the same thing, except without the styling. You can see that everything is flushed to the left. Since the navigation is in the header section, we will first need to make sure that display: grid is turned on. Now the header grid area is CSS Grid.
[0:27] When we made the header area into a grid, it turned into a vertical list. In order to make the navigation horizontal again, we will use grid-auto-flow: column. Now the navigation is back to horizontal. To put it back into a row, we can change the grid-auto-flow into row. Let's put it back to column since that's how we want it to look.
[0:48] While this looks a bit more like the navigation we want with the spacing, it doesn't exactly look like the left-side logo and right-side navigation items that we were looking at in the demonstration.
[0:58] The quick trick to do that is to set grid-template-columns: 1fr. Boom. Here we go. Here's the navigation with the logo on the left side and the rest of the navigation to the right. Let's give this some grid gaps to space the navigation items out. That looks much better.
[1:14] Let's also give it some padding, and let's vertically align it to the center. Here we go. The left-flushed logo and the right-side navigation.
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
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!