69. Placing Items by Line Numbers
Once the grid structure is defined, you can place individual items using the numerical grid lines. Lines are numbered starting at 1 from the start edge of the container.
The Placement Properties
| Property | Defines |
|---|---|
grid-column-start | The line number where the item begins horizontally. |
grid-column-end | The line number where the item ends horizontally. |
grid-row-start | The line number where the item begins vertically. |
grid-row-end | The line number where the item ends vertically. |
Example: Spanning Columns
Assume a grid with four columns (5 lines).
css .container { grid-template-columns: repeat(4, 1fr); }
.header-item { /* Start at line 1 and end at line 5 (spans all 4 columns) */ grid-column-start: 1; grid-column-end: 5;
/* Place the item in the first row (starts at 1, ends at 2) */ grid-row-start: 1; grid-row-end: 2; }
Using span for Item Sizing
Instead of defining the end line, you can specify how many tracks the item should span using the span keyword.
css .half-width-item { /* Starts at line 2 and spans 2 columns (ends at line 4) */ grid-column: 2 / span 2; }
Shorthand: grid-column: <start> / <end>; and grid-row: <start> / <end>;