CSS Grid Lines
CSS Grid Lines
The lines between columns are called column lines.
The lines between rows are called row lines.
We can specify where to start and end a grid item by using the following properties:
You can refer to line numbers when placing a grid item in a grid container.
CSS grid-column-start and grid-column-end
The grid-column-start property specifies where to start
a grid item.
The grid-column-end property specifies where to
end a grid item.
Example
Place the first grid item at column-line 1, and let it end on column-line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Result:
The CSS grid-column Property
The grid-column property is a shorthand property for the
grid-column-start and the
grid-column-end properties.
Example
Place the first grid item at column-line 1, and let it span 2 columns:
.item1 {
grid-column: 1 / span
2;
}
Result:
CSS grid-row-start and grid-row-end
The grid-row-start property specifies where to start
a grid item.
The grid-row-end property specifies where to
end a grid item.
Example
Place the first grid item at row line 1, and let it end on row line 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Result:
The CSS grid-row Property
The grid-row property is a shorthand property for the
grid-row-start and the
grid-row-end properties.
Example
Place the first grid item at row-line 1, and let it span 2 rows:
.item1 {
grid-row: 1 / span 2;
}
Result:
All CSS Grid Lines Properties
| Property | Description |
|---|---|
| display | Specifies the display behavior (the type of rendering box) of an element |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-start | Specifies where to start the grid item |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-start | Specifies where to start the grid item |
