CSS grid-column-end Property

The grid-column-end property specifies how many columns the grid item will span and on which column to stop displaying the item.

Initial Value auto
Applies to Grid items.
Inherited No.
Animatable Yes. The number of columns are animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridColumnEnd = "3";

Syntax

grid-column-end: 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: 5px;
      background-color: #8ebf42;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end 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>7</div>
    </div>
  </body>
</html>

Another example where the grid-column-end is specified by span 3:

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: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #888;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-end: 3;
      }
      .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: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .span-box1 {
      grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end 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>
    <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.
column-line Specifies on which column the display of the item should end.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Prev
Next

Related articles