Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical
Media queries (@media) are useful to establish breakpoints in your layout. Breakpoints are dependent on specific characteristics and parameters, such as screen resolution or browser viewport width.
The grid-auto-flow CSS property controls how the auto-placement works, specifying how auto-placed items get inserted in the grid.
We'll use both a media query and grid-auto-flow to flip the navigation from horizontal to vertical.
Instructor: [0:00] We use media query to change the grid layout of a certain screen width. Now, let's do the same thing for the navigation bar up top. It looks great being in the horizontal layout while the screen was wide enough, but once it gets smaller like on a phone, the navigation tends to get cramped.
[0:14] We'll use the media query to flip the navigation from horizontal to vertical once the screen size hits a certain width. We're going to use Add Media again. This time, we'll set the max width to 500px. We can flip the direction of the content in a grid by using grid-auto-flow. Since the default is column, we'll flip it to row to make it line up vertically.
[0:36] Two problems I encountered. One is that media query needs to come after a class that it's changing, so I had the media query above the header class, and that didn't work, so I moved it down.
[0:49] Now, when the browser becomes smaller than 500px wide, then it collapses into vertical navigation which is great, except, look at that, the navigation is bleeding into the profile content. Let's inspect element and see what's going on here.
[1:03] As we can see, the header is stopping here, and the content is bleeding out. This means we need to go to the container and check the header out. We've set it to 50px, which is exactly what it's doing. What we need to do is change this to auto. Ta-da! It now shrinks and expands to automatically fit the content.