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.