gridcolumnstart

grid-column-start is a longhand property in CSS Grid Layout that specifies the starting grid line for a grid item along the column axis. Its value can be a numeric line index, a named grid line, or auto. It does not by itself determine the end line or the span; those are controlled by grid-column-end or by the grid-column shorthand.

In practice, grid-column-start is usually used together with grid-column-end to define how many columns an item spans. For example, grid-column-start: 2; grid-column-end: 4; places the item starting at grid line 2 and ending at grid line 4, thereby spanning two columns. The equivalent shorthand is grid-column: 2 / 4. To span a number of columns via the end side, you can use grid-column: 1 / span 3, which starts at line 1 and spans three columns.

Named lines can also be used if the grid template defines them. For instance, a template like grid-template-columns: [left] 100px [content] 1fr [right]; allows placing with grid-column-start: content; or using the full shorthand grid-column: content / end-name.

Auto placement is possible when the value is auto; in this case the browser determines the start line according to the grid’s auto-placement algorithm. Grid line numbering begins at 1 from the left edge, with additional lines between column tracks; end lines are not inclusive of the track to their right. grid-column-start is supported by all major browsers without vendor prefixes and is one component of the grid-positioning system that also includes grid-column-end and the grid-column shorthand.