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.