grid-column-end#

#Introduction

The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement.

#Examples

css-apisrc/grid-column-end/App.tsx

Preview

#Syntax

/* <number> values */
grid-column-end: 2;
grid-column-end: 3;

/* span <number> values*/
grid-column-end: span 1;

#Values

• auto

  Default value. Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of 1.

• <number>

  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. An integer value of 0 is invalid.

• span && <number>

  Contributes a grid span to the grid item's placement such that the column end edge of the grid item's grid area is n lines from the start edge.

#Formal definition

#Formal syntax

grid-column-end = <number> | [span && <number>]

#Difference between web

• <custom-ident>, span && <custom-ident>, <integer> && <custom-ident>? are not supported.

#Compatibility

LCD tables only load in the browser