Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Add Gutters Between Rows and Columns4:18 with Guil Hernandez
CSS Grid gives you control over the spaces (or gutters) between columns and rows. You separate grid tracks using the
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
You need to sign up for Treehouse in order to download course files.Sign up