W3docs
en
Log in

CSS grid-column Property

The grid-column property specifies the the sizing and location of grid item in a grid layout. Know how to use this property with the help of examples.

The grid-column property defines the size and location of grid items in a grid layout. It is a shorthand for the following properties:

Initial Valueauto auto
Applies toGrid items.
InheritedNo.
AnimatableYes. Items are animatable.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridColumn = "1/ span 3";

Syntax

Syntax of CSS grid-column Property

grid-column: <start-line> / <end-line> | <start-line> / span <end-line> | <global>;

Note: <global> represents global CSS keywords such as initial, inherit, unset, and revert. They apply to the entire property value, not just as alternatives to line numbers.

Grid lines are numbered starting from 1 at the start of the grid. You can also use negative numbers to count from the end (e.g., -1 refers to the last line).

Example of the grid-column property:

Example of CSS grid-column Property with line numbers

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

Result

CSS grid-column Property

Example of the grid-column property specified as 1 / 3:

Example of CSS grid-column Property

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

Values

ValueDescription
<line-number>Specifies the line number for the start or end edge.
<line-name>Specifies the line name for the start or end edge.
span <number>Specifies the number of columns the item should span.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is the functionality of the 'grid-column' property in CSS?