Now we'll be using CSS Grid to change a holy grail layout into a responsive holy grail layout. You should be able to complete this using ONLY the CSS file, but... use whatever tools you like. As long as one of those tools is media queries!
You shouldn't be! This is honestly a cleaner solution than Flexbox's. But if you'd rather, you can always switch to the Flexbox version of this challenge.
This is a fork-and-clone situation. Go do that thing!
You have as resources:
- A holy grail layout. Your desktop layout is done!
- Screenshots in
assetsfor a tablet layout and a mobile layout.
It doesn't have to be pixel-perfect, but implement the following two layouts:
- A mobile layout that takes effect if the screen is below 700 pixes wide.
- A tablet layout that takes effect if the screen is bigger than the mobile layout but below 1100 pixels wide.
Remember: The goal here is to practice your media queries and Grid, NOT to work on your pixel-perfect heights and widths!
But Batman doesn't need luck.