0:00 Next up, we're going to talk about grid gaps. I think I'm going to go down to nine boxes again. Let's make a three-by-three grid. We'll have three columns, three rows. Let's use repeat, which honestly, it's maybe a bit overkill. Let's repeat one fraction three times, and then duplicate that for grid-template-rows as well.

0:22 Three one-fraction columns, three one-fraction rows. Here we go. They fill up our container. I can add gaps in. Let's start by saying gaps between the columns by using the property column-gap. Whatever I set this to -- let's do 20 pixels -- will add a 20-pixel gap between the columns.

0:44 Now, it does not add the gap on the left and the right side between the content and the container, only between the columns internally, if that makes sense. We have a gap there. We have a gap there. Also, it's important to note, it's a total of 20 pixels for that gap. It's not 20 pixels assigned to this one and 20 pixels assigned to the middle, adding up to 40 pixels.

1:06 No, it's just 20 total pixels. Of course, we also have row-gap. Let's do 20 pixels there, too. Same deal where it applies a gap between the individual rows but not between the first row in the container or the last row in the edge of the container. That's how you can add individual gaps.

1:26 Of course, you could have different numbers, too, larger row-gaps. There's also a shorthand property. I could rewrite this using grid-gap of 20 pixels. Although, let's do 10 pixels so you notice the difference. It applies 10 pixels between the columns and between the rows. The shorthand property also takes two values if you want -- 10 pixels, 30 pixels.

1:51 It applies 10 pixels as the gap between rows, 30 pixels as the gap between columns. That's how we can add grid-gaps.