Responsive Design — Redefining Grid Areas with Media Queries
The Grid areas you create within the parent grid container are not set in stone. The grid areas can be changed based on the screen size of the user’s device.
We'll cover the following...
The image below shows what we aim to achieve on mobile displays.
For our specific use-case we will do some refactoring for a mobile first approach.
Mobile first is simply making your default styles those for mobile devices. Then you may go ahead to make changes for larger displays via media queries.
Let’s tweak the current code we have now. Wrap the grid defining bit in a media query.
Like this:
@media only screen and (min-width: 600px) {
body {
grid-template-columns: 120px 1fr;
grid-template-areas: "sidebar content"
"footer footer";
}
}