Add Gutters Between Rows and Columns

With CSS grid you have total control over the spaces or 0:00 gutters between columns and rows. 0:04 You separate grid tracks using the grid row gap and grid column gap properties. 0:06 So first I'll remove the h2 paragraph and text from the grid container. 0:12 Give that a save and over in the grid rule, 0:18 let's set a gutter between our column tracks with grid column gap. 0:22 The value for grid column gap and grid row gap can be any CSS length unit, 0:29 or a percentage of the parent container width. 0:34 I'll set grid column gap to 20 pixels. 0:37 And as you can see that creates a 20 pixel gutter between the column tracks. 0:42 Now let's set a gutter for the row tracks and the grid row, 0:48 add grid row, gap, let's set it to 15 pixels. 0:53 And you'll notice how the gutters do not appear on the outer edges of the grid so 1:00 there is no gutter before the first row and column track or after the last tracks. 1:05 The gaps are created between adjacent columns and rows only. 1:11 There's also a handy shorthand property for sorting both row and 1:15 column gaps at once, grid-gap. 1:19 So back in my CSS, i'll replace the column and 1:21 row gap properties with just grid gap. 1:26 And in the shorthand property, the first value sets the grid row gap, 1:30 and the second value sets the grid column gap. 1:36 And writing just one value sets the gutter size for both columns and rows. 1:43 So now we have 15 pixel gutters between all rows and columns. 1:50 And that's the basics of creating a grid. 1:55 You've just setup a CSS grid layout in your page. 1:58 Feel free to experiment with the grid tracks and 2:01 grid-gap values to see how it changes the layout. 2:04 Now let's quickly review how the grid we created maps to the terminology 2:08 concepts you've learned earlier. 2:12 You know that the grid did is a red container and 2:15 the direct child elements are the grid items. 2:18 When we defined the grid tracks with grid template columns and 2:21 grid template rows grid provided us numbered lines called grid lines 2:25 to use for positioning the items. 2:30 You can refer to each grid line by a numerical index. 2:33 Columns start at one, from left to right, by default and 2:37 rows also begin at one from top to bottom. 2:41 Keep in mind that a grid line isn't a complete column or row. 2:44 For instance, it takes two grid lines to make a single column, 2:48 one line on either side. 2:52 So our three column, two row grid consists of four column lines and three row lines. 2:54 The vertical lines 1 and 2 determine the start and end points of the first column, 3:01 lines 2 and 3 the second column, and lines 3 and 4 the third. 3:07 Similarly, horizontal lines one and two determine the position of the first row, 3:12 and lines two and three the second row. 3:17 Finally, grid gaps create separation between columns and rows, 3:19 but they do not affect the position of grid lines. 3:24 In other words, there's just a single grid line between two columns even if 3:28 there's a large gap between the columns. 3:32 In a later video, 3:35 you'll learn how to place items on the grid using line numbers. 3:36 So knowing these concepts now will help you better understand how 3:40 line-based positioning works. 3:44 You've learned the most important parts of CSS grid layout and 3:46 you're starting to see how grid simplifies the code needed to create layouts that 3:50 used to require lots of extra code. 3:54 But we're just getting started. 3:56 In the next stage you'll get to know grids, intelligent resizing and 3:58 replacement abilities. 4:02 You'll learn to use a new flexible length unit designed just for grid, write your 4:03 track list using less code, expand grid items to fit available space and 4:08 how to make items automatically wrap and adjust according to the container width. 4:12 See you soon. 4:17