The previous three properties also exist for columns. grid-column-start, grid-column-end and grid-column work identically to the row properties. These properties allow a grid item to span multiple columns.

When using these properties, we can use the keyword span to start or end a column or row, relative to its other end. Look at how span is used in the code below:

.item { grid-column: 4 / span 2; }

This is telling the item element to begin in column four and take up two columns of space. So item would occupy columns four and five. It produces the same result as the following code blocks:

.item { grid-column: 4 / 6; }
.item { grid-column-start: 4; grid-column-end: span 2; }
.item { grid-column-start: span 2; grid-column-end: 6; }

span is a useful keyword, because it avoids off-by-one errors (miscalculating the ending grid line) you might make when determining the ending grid line of an element. If you know where you want your grid item to start and how long it should be, use span!



Let’s add another item to our grid. Navigate to index.html and uncomment the B div.


Let’s make box b take up a few rows. Go back to style.css, in the .b ruleset, use grid-row with span to make the item take up rows two through four.


Next, make box b take up six columns. In style.css, in the .b ruleset, use grid-column to set its starting column to 2. Use span to make the item take up six columns.


Now let’s go back to the box a ruleset. Refactor the grid-column-start and grid-column-end declarations into a shorthand grid-column declaration. The grid item should still start in the first column and span 2 columns using the span keyword.

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?