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!