gridcolumnend

gridcolumnend refers to the CSS Grid longhand property grid-column-end. It specifies the end line of a grid item along the column axis, and it is used in conjunction with grid-column-start to place and size items within a grid. This property is one half of the pair that defines a grid item’s horizontal span, with grid-column-start determining the starting line and grid-column-end determining the ending line.

The allowed values for grid-column-end include a grid line number, a named grid line defined in grid-template-columns, the keyword auto, or the span notation to cover multiple tracks. Specifically, you can use a number such as 4 to end at the fourth vertical grid line, or a named line like right or footer if you have named lines in your template. The syntax also supports grid-column-end: span N, which ends after spanning N columns from the start line defined by grid-column-start. Using span without a start line is not meaningful; it is used together with grid-column-start.

Typical usage examples include:

grid-column-start: 2; grid-column-end: 4; which positions an item from the second to the fourth vertical grid line, spanning two columns.

grid-column-start: 1; grid-column-end: span 2; which places the item starting at the first line and spanning two columns.

These can also be combined in the shorthand grid-column: 2 / 4 or grid-column: 1 / span 2.

In practice, grid-column-end works alongside grid-column-start and interacts with named lines defined in grid-template-columns, enabling flexible, responsive layouts. It is supported in all major browsers that implement CSS Grid.

---