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

Share this video with your friends

Send Tweet

🚨 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!

davide
davide
~ 4 years ago

Hi, grid-column-gap and grid-row-gap are now deprecated. We need to use column-gap and row-gap instead.

thanks

Sreekumar
Sreekumar
~ 4 years ago

and grid-gap is now gap!

Fernando Céspedes
Fernando Céspedes
~ 2 years ago

Thanks davide and Sreekumar. Some courses should be updated I have found some issues in flexbox courses too because of changes over time.

Lucas Minter
Lucas Minter
~ 2 years ago

Thank you! We updated the description to account for the syntax changes.