Remake these images using CSS Grid. Feel free to use more pleasant colors. Don't use
grid-template-areas for your layout on numbers 1-3.
Hint: Think ahead about the "smallest common denominator" in terms of how many columns you might want to set up your grid to have.
See the hint from #1
minmax() to make it look like this on a laptop with four columns no matter how many boxes there are:
And like this on a phone, with two columns no matter how many boxes there are:
4. Responsive Layouts
The next three use the same HTML and CSS files. Same pieces of content, but will display different on different devices.
Use media queries to make your layout similar to the images below:
Feel free to use
grid-template-areas for your layout on this one.