grid-column is the shorthand for grid-column-start and
grid-column-end. The grid-column
property sets the width of an individual
grid item.
Let's understand how grid-column
property works by looking at the above
example.
Item 1 :
grid-column: auto auto
: The grid item's column start and column end are
automatically set.(Default)
Item 2 :
grid-column: 1 / 4
: The grid item starts before the first column and ends just
before the fourth one.
Item 3 :
grid-column: span 2
: The grid item spans 2 columns.
Item 4 :
grid-column: 1 / span 2
: The grid item starts before the first column and
spans for 2 columns.
Item 6 :
grid-column: 1 / -1
The grid item starts before the first column and ends just
before the last column.