CSS Grid Item

A grid item is a direct child of a grid container. Using properties like grid-column and grid-row, we can tell an item precisely where to sit and how many cells to span across.

Grid Column Spanning

The grid-column property is a shorthand for grid-column-start and grid-column-end. It defines how many columns an item will span.

.item-1 {
    grid-column: 1 / 3; /* Starts at line 1, ends at line 3 (spans 2 columns) */
}

Grid Row Spanning

Similar to grid-column, the grid-row property tells an item which row to start at and where to end.

.item-1 {
    grid-row: 1 / span 2; /* Starts at first row, spans across 2 rows */
}

The grid-area Property

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and the grid-column-end properties.

/* Starts on row 1, col 2 and ends on row 2, col 3 */
.item {
    grid-area: 1 / 2 / 2 / 3;
}