CSS Grid Practice

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.

1.

Hint: Think ahead about the "smallest common denominator" in terms of how many columns you might want to set up your grid to have.


2.

See the hint from #1


3.

Use auto-fit and 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.


Phone:


Tablet:


Laptop: