W3cubDocs

/CSS

grid-column-start

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. This start position defines the block-start edge of the grid area.

/* Keyword value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: somegridarea;

/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: 5 somegridarea span;

/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: unset;
Initial value auto
Applies to grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

This property is specified as a single <grid-line> value. A <grid-line> value can be specified as:

  • either the auto keyword
  • or a <custom-ident> value
  • or an <integer> value
  • or both <custom-ident> and <integer>, separated by a space
  • or the keyword span together with either a <custom-ident> or an <integer> or both.

Values

auto
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.
<custom-ident>
If there is a named line with the name '<custom-ident>-start', it contributes the first such line to the grid item’s placement.

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-column-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).

Otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>.

<integer> && <custom-ident>?
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.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

An <integer> value of 0 is invalid.

span && [ <integer> || <custom-ident> ]
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.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

The <custom-ident> cannot take the span value.

Formal syntax

<grid-line>

where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Examples

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

Specifications

Specification Status Comment
CSS Grid Layout
The definition of 'grid-column-start' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support

57

292

16

52

403

No

44

284

10.1
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support

57

291

57

292

16

52

403

44 10.3 ?

1. From version 29: this feature is behind the Enable experimental Web Platform features preference.

2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 28: this feature is behind the Enable experimental Web Platform features preference.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start