Check out a free preview of the full CSS In-Depth, v2 course:
The "Adding Gutters & Exercise" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

An overview of the grid-gap() property

Get Unlimited Access Now

Transcript from the "Adding Gutters & Exercise" Lesson

[00:00:02]
>> Estelle Weyl: So, let's talk about adding the gutters. So far I added gutters, I believe, or no, did I not? I added gutters to make it look better but I didn't tell you about it. Because this is what it looks like without gutters. All right, that's ugly. One of the nice things, that way you don't have to worry about margins.

[00:00:23] You always have the same amount of margins between cells. It's really nice to have a nice layout with good white space. White space makes websites much more readable. So instead of saying, here's a paragraph of text, and I want padding here, and then margins, and you can just say, well, it's gonna be 20 pixels between any element.

[00:00:42] So it's going to be legible. Okay, so we have three properties. We have the grid-column-gap, the grid-row-gap and then just a shorthand, which is the grid-gap. And margin does actually still work on these, so let's go over here and play with it. So when I say grid row, it's between each row.

[00:01:15] When I say grid gap, column gap, it's between the columns. When I undo this one right here, it's going to be the exact same. Because the order is row, and then column.
>> Estelle Weyl: So top to bottom, left-right, which makes it less confusing than when we were doing the tables.

[00:01:38] Okay, so here, let's just make it 40 pixels. Okay, and then 10. And that might make you realize why you probably just wanna do one number overall for column gap, cuz that looks much better, right, having it even. You can use different units, right, 1m instead. But let's actually put margin on one of these li Nth of type 3.

[00:02:13] Margin 20 pixels. So margins still works. Box sizing, border box.
>> Estelle Weyl: I just wanted to see what that did. And then we can put padding, 30 pixels. And it just change the whole layout of the page.
>> Estelle Weyl: Because the FR unit is now a different length, right? Before, it maintained the same length, but then now that I added padding, that element is much bigger.

[00:02:57] But between the margin and the padding, the element got much bigger, which shrank the amount of free space.
>> Estelle Weyl: Okay, so what I want you to do over the next five minutes is to create a grid. So there's a little thing here, so let's try it out. And I want you to create a grid container with a display property, or grid template area, but we didn't go over grid template area.

[00:03:22] So just forget that there's an or here, or either. And then optional added gutter with grid-gap, or grid-column-gap and grip-row-gap.