CSS grid-column-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The grid-column-start property determines from which column the element will be located in the grid layout, or how many columns the element will span. In order to determine how many columns an element will occupy, or on which row of a column the element will end, you can use the grid-column-end property.

Initial value: auto
Applies to: Grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.gridColumnStart

Interactive Demo

grid-column-start: auto;

grid-column-start: 2;

grid-column-start: -1;

grid-column-start: span 2;

One

Two

Three

Syntax

grid-column-start: auto | line | line-name | span line

Values

autoA keyword indicating that the property does not affect the placement of the element in the grid layout (automatic placement, automatic range, or default range of 1). This is the default value.
lineAn integer that corresponds to the initial face of the element in the grid layout (counting the faces is left to right from the left edge of the element, a schematic display at the top of the page). If a negative integer is specified, then the count is in the reverse order, starting from the end edge of the explicit layout grid. A value of 0 is not valid.
line-nameA string value that refers to a named column in a grid layout. The element is located from the initial face of the specified element.
span lineThe span keyword with an integer that determines how many columns the grid element will span. If an integer is omitted, the default value is 1. A negative value or a value of 0 is not valid.

Example

HTML

<div class="grid-container">

   <div class="item-a">A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

<div class="grid-container2">

   <div>A</div>

   <div class="item-b">B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

CSS

.grid-container,
.grid-container2 {
   display: grid; 
   margin-top: 5px; 
   padding: 10px; 
   background: rgb(0,150,208); 
   grid-template-columns: [line1] 25%  [line2] 25%  [line3] 25%  [line4] 25%;
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
   padding: 20px 0;
} 
.item-a {
   grid-column-start: 2; 
   background: red !important; 
}
.item-b {
   grid-column-start: line4;
   background: yellow !important;
}

Result

Editor