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!
Stephanie Eckles: [0:00] You'll see the CSS grid we created in the last lesson, but instead of two rows and two columns of grid, I've increased the number to three rows and three columns. I've also added a border. We'll set gutters or spaces between the grids so that you can manipulate the spacing, and you don't encounter the issue you see here with two of the borders stock on each other.
[0:20] To do this, you can set grid-column-gap and grid-row-gap. Let's go with grid-column-gap of 10pxls and grid-row-gap of 20pxls. Let's refresh. You can see now that there is a grid-column-gap of 10pxls between each grid and grid-row-gap of 20pxls between each grid.
[0:42] You can also shorten the grid-column-gap and grid-row-gap into one row by using grid-gap and then specifying row, then column. If the gaps you want to set between the rows and columns are the same, you can just put one number there. Rewrite what we have here with grid-column-gap of 10pxls and grid-row-gap of 20pxls in one line.