CSS Grid Exercises

There are two challenges to tackle, depending on your time.

Part 12A - Mosaic grid layout

In the begin folder, you're given some starting HTML and CSS.

Using CSS Grid, lay out the page as you see in the screenshots for desktop and mobile dimensions.


  • You may want to steal some styling from the Flexbox layouts we did yesterday with similar content.

  • You may want to look at some of the work we did earlier and apply it to this problem.

  • Start with the number of rows and columns needed, then worry about how to fit the images into those spaces.

Part 12B - Integrate mosaic in home page

I've given you yesterday's final end state of our Flexbox work.

Now try swapping out the "collections" section at the bottom of the home page for the "pop art" mosaic you just created with Grid.