grid-column-start#

#Introduction

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

#Examples

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

Preview

#Syntax

/* <number> values */
grid-column-start: 1;
grid-column-start: 2;

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

#Values

• auto

  Default value. 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 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 start edge of the grid item's grid area is n lines from the end edge.

#Formal definition

#Formal syntax

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

#Difference between web

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

#Compatibility