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.