Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Grid Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Add Gutters Between Rows and Columns

4:18 with Guil Hernandez

CSS Grid gives you control over the spaces (or gutters) between columns and rows. You separate grid tracks using the row-gap and column-gap properties.

Note:

The grid-row-gap, grid-column-gap, and grid-gap properties will still work, but have since been made obsolete. Their names have been shortened from grid-row-gap to row-gap, grid-column-gap to column-gap, and grid-gap to gap. It is recommended to use these shortened property names now.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 set up 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 div is a grid 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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up