The grid-row and grid-column property sets the position and the size of a grid item.
grid-row and grid-column are shorthand for the following properties:
grid-row-start and grid-column-start specify the row/column grid line of the grid layout from where the grid item starts.
And grid-row-end and grid-column-end specify the row/column grid line where the grid item ends.
Let's look at some examples:
Let's look at another example, where we use span and -1:
Here -1 indicates the last grid line of the grid layout and span 2 means the item stretches or extends 2 rows.
grid-row-end and grid-column-end values are optional, if we want to change the position only and not the size of the grid item.