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
3. 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:
Try to do this without using
grid-template-areas for your layout on this one.
Do the above exercise using
grid-template-areasfor your layout instead.
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: