Specify a Gutter in CSS Grid with gap (grid-gap)

🚨 Update: grid-column-gap, grid-row-gap, grid-gap have all changed to be column-gap, row-gap, and gap. Behavior has not changed. Just swap out the syntax and it will still work. 🚨

You can check your results of lesson 02 challenge with the starting code in this lesson! I added 3 rows and columns to my grid.

You can see that when we have a border on the boxes in our grid that they are all stuck together. This doesn't look great so let's fix it.

CSS Grid gives us a great tool to do just that. We will apply grid-column-gap and grid-row-gap to specify the space in-between our columns and rows.

Lesson Challenge

CSS Grid gives us a shorthand version of what we used in the lesson to apply the same styles in one line instead of two. Your challenge is to use grid-gap to apply the same style in just one line. Play with the gap size to see the styles in action!

Hint: row comes first!