A grid container contains grid items; by default, a container has one grid item for each column in each row, but you can style the grid items so that they span multiple columns and/or rows.
The “grid-column” property defines which column(s) to place a grid item, as well as define where the item will start and end.
Likewise, the “grid-row” property defines which row to place a grid item, as well as define where the item will start and end
To place an item, you can refer to line numbers, or use the keyword “span” to define how many rows the item will span:
Example: grid-column: 2 / 5; grid-row: 1 / span 3;
(These two properties with have a grid item start on column 2 row 1, and end on column-like 5 and span 3 rows)
Note: The “grid-column” and “grid-row” property is a shorthand property for their respective properties: grid-column-start / grid-column-end, and grid-row-start / grid-row-end.