CSS grid-column-start Property

The grid-column-start property specifies the start position of the item within the column.

Initial Value auto
Applies to Grid items.
Inherited No.
Animatable Yes. The starting point is animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridColumnStart = "6";

Syntax

grid-column-start: auto | span n | column-line | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 10px;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Another example where the grid-column-start is specified by span 2:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 10px;
      background-color: #888;
      padding: 10px;
      margin-top: 20px;
      }
      .span-container > div {
      background-color: #fff;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .span-box1 {
      grid-column-start:  span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start property example</h2>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Values

Value Description
auto Only one column will be spanned. This is the default value of this property.
span n Specifies the number of the columns the item will span.
column-line Specifies on which column the display of the item should start.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

57.0+ x 16.0+ 52.0+ 10.1+ 44.0+



Related articles