Part 10A: Desktop-only system

Starting CodePen

Finished CodePen

We'll create the same 4-column grid system that we did with Flexbox, using the same instructions as before -- the HTML comments will tell you how many boxes per row, with a total of 4 columns.

However, this time, you should not need to mark each row individually. Because this is Grid, you should have enough markup here to set this up without adding extra divs.

You may need to add some classes to designate how large each box should be. Consider what your default value is - those boxes may not need a class.

Part 10B: Mobile-first responsive system

Now we'll add media queries to make our grid system mobile-first.

Starting CodePen (continues from the 10A finished state)

Finished CodePen