Learn

In all of our grids so far, there hasn’t been any space between the items in our grid. The CSS properties row-gap and column-gap will put blank space between every row and column in the grid.

.grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); column-gap: 10px; }

It is important to note that grid gap properties does not add space at the beginning or end of the grid. In the example code, our grid will have three columns with two ten-pixel gaps between them.

Let’s quickly calculate how wide these columns are. Remember that using fr considers all of the available space. The grid is 320 pixels wide and 20 of those pixels are taken up by the two grid gaps. Therefore each column takes a piece of the 300 available pixels. Each column gets 1fr, so the columns are evenly divided into thirds (or 100 pixels each).

Finally, there is a shorthand CSS property, gap, that can set the row and column gap at the same time.

.grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }

The example above will set the distance between rows to 20 pixels and the distance between columns to 10 pixels. Unlike other CSS grid properties, this shorthand does not take a / between values! If only one value is given, it will set the column gap and the row gap to that value.

Note: You might have seen grid-row-gap, grid-column-gap, and grid-gap in other code, but these properties are now deprecated.

Instructions

1.

Use row-gap to create a gap of 20px between the rows of your grid.

2.

Use column-gap to create a gap of 5px between the column of your grid.

3.

Comment out the row-gap and column-gap declarations. Refactor the two properties into a shorthand gap property.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?