Learn
CSS Grid Essentials
Grid Column

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!

Instructions

1.

Let’s add another item to our grid. In index.html, add another div of class box and b inside the grid div.

2.

Let’s make box b take up six columns. In style.css, create a rule for elements of class b. Use grid-column to set its starting column to 2. Use span to make the item take up six columns.

3.

Let’s also make box b take up a few rows. Use grid-row with span to make the item take up rows two through four.

4.

Now let’s go back to box a and refactor the value of the grid-column property using the keyword span. The grid item should still start in the first column and span 2 columns.

Folder Icon

Take this course for free

Already have an account?