CSS · Chapter 25 of 44
CSS Grid Item Placement
Individual grid items can be placed precisely using grid-column and grid-row, specifying start and end lines, or by using named grid-template-areas.
This lets you create complex layouts like magazine-style grids where items span multiple rows or columns.
Syntax
grid-column: start / end;
grid-row: start / end;Line-based placement
grid-column: 1 / 3; places an item spanning from line 1 to line 3 (covering two columns). grid-row works the same way for rows.
Named areas
grid-template-areas defines a visual map of named regions, and grid-area assigns an item to one of those named regions.
Example 1 (css)
.hero {
grid-column: 1 / 3;
grid-row: 1;
}Output
The hero item spans across two columns in the first rowgrid-column: 1 / 3 tells the item to stretch from the first grid line to the third.
Key points
- grid-column and grid-row use start/end line numbers.
- Items can span multiple columns or rows.
- grid-template-areas creates named layout regions.
- grid-area assigns an item to a named area.
💡 Note: You can use span keyword, like grid-column: span 2; to cover two columns from the current position.