Create a Responsive Layout Using Media Queries with CSS Grid

Once the browser screen width becomes smaller than a certain size, you can change the layout to fit the screen resolution or browser viewport width. You do this by utilizing media queries (@media) that redefine the values set like grid-template-columns and grid-template-areas.

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. While the grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Lesson Challenge

As a challenge, try to write a media query that would change the layout from horizontal to vertical when the screen size is below 700px.

Hint: use @media Queries, grid-template-columns, and grid-template-areas.