Units and Utilities 3 exercises

Implement a Checkerboard Layout

In this exercise, you'll practice using the repeat function in CSS Grid to reduce duplication when defining grid template columns and rows.


Given the following layout:

![file screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1684450844/tutorials/images-10.1_Exercise6_I

Loading exercise


0:00 In this exercise I'd like you to get some practice with repeat and working with fractions. This is the initial layout that you'll see. It's once again an HTML file that you don't need to touch but there's a container, the div with an ID of container, and then a bunch of other divs that have a pink and purple background color.

0:16 You don't even need to look at this file. What I'd like you to do, though, is turn it into this layout. It happens to be a checkerboard layout, but it's really just a five-column layout by four rows. If you look at the CSS, as always, there's a no-touching zone. You don't need to touch any of this stuff.

0:34 Further down, here's where we write our styles. I'd like you to use repeat and fractional units to create a layout with five equally sized columns, four equally sized rows. Again, use fractions. Don't use pixels or some other value like percentages just so you get more practice with that. Write your styles here to style the container -- five columns, four rows.