Grid Column

Control where items are placed horizontally in the grid.

The gridColumn property defines which columns an item should occupy within a grid.

Example

Quick Notes

• start and end define the grid lines.
• You can use absolute indices (1-indexed) or relative spans (e.g., { span: 2 }).
• Column lines follow the Grid container's direction: line 1 is at the left of the explicit grid in LTR and at the right in RTL.

Next Steps

• Grid Row
• Grid Templates