Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
The grid-row
and grid-column
properties define which row or column an element will be displayed on.
.element {
grid-row: 1 / 2;
grid-column: 3 / -1;
}
Here’s an explicit 3 × 3 grid where these properties are used to place grid items onto it in specific places:
Browser support
More information
Related
column-gap
.example { column-gap: 25px; }
gap
.element { gap: 20px 30px; }
grid
.element { grid: auto-flow dense / repeat(5, 150px); }
grid-auto-columns
.element { grid-auto-columns: minmax(100px, 200px); }
grid-column
.element { grid-column: 3 / 5; }
grid-column-end
.element { grid-column-end: 4; }
grid-column-start
.element { grid-column-start: 3; }
row-gap
.element { row-gap: 2rem; }