CSS grid-column-end Property

Description

The grid-column-end CSS property defines the grid line where a grid item ends on the column (inline) axis. It determines the far edge of the item’s placement within the grid’s column tracks, and together with its starting line it establishes the number of columns the item spans and its final positioning. When the end line is explicitly set, the browser resolves that line relative to the grid’s defined column lines and any named lines, and uses that resolution to place the item within the overall grid structure. Because it targets the end edge, it is conceptually the counterpart to the property that controls the item’s start edge; those two are resolved together to compute the item’s occupied track area.

Placement behavior for grid-column-end interacts closely with the item’s start specification and with shorthand placement. For author convenience you can use the corresponding start property — grid-column-start — or the combined shorthand — grid-column — to express the same intent in a single declaration. When only one of start or end is explicitly provided, the UA will compute the missing edge based on auto-placement rules, any explicit spans, and the grid’s writing direction; if neither is provided the item may be placed by the auto-placement algorithm instead of by a fixed pair of lines.

The value chosen for the end edge also affects the grid’s track generation and overlap behavior. Placing an end line past the explicit grid can create implicit tracks, expanding the grid to accommodate the item; conversely, placing multiple items so their resolved start/end lines overlap will cause them to stack within the same grid area unless other layout or z-index rules separate them. This interaction is influenced by how the grid’s columns are declared — for example the template that defines columns — grid-template-columns — and by the auto-placement direction and packing rules controlled by the auto-placement property — grid-auto-flow. For symmetry and analogous behavior along the block axis, there is an equivalent property for rows — grid-row-end — which behaves the same way but targets the row axis instead.

Definition

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.gridColumnEnd

Interactive Demo

grid-column-end: auto;

grid-column-end: 3;

grid-column-end: -1;

grid-column-end: span 3;

One

Two

Three

Syntax

grid-column-end: 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 end face of an element in the grid layout (the counting of faces in the layout is carried out from 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 to 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">

  <div class="item item1">

    Item 1

    <small>grid-column-start: 1; grid-column-end: 2;</small>

  </div>

  <div class="item item2">

    Item 2

    <small>grid-column-start: 2; grid-column-end: 3;</small>

  </div>

  <div class="item item3">

    Item 3

    <small>grid-column-start: 3; grid-column-end: span 2;</small>

  </div>

  <div class="item item4">

    Item 4

    <small>grid-column-start: 5; grid-column-end: 6;</small>

  </div>

  <div class="item item5">

    Item 5

    <small>grid-column-start: 6; grid-column-end: -1;</small>

  </div>

</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(6, 120px);
  grid-auto-rows: 80px;
  gap: 14px;
  padding: 14px;
  background: #f4f7fb;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #4a90e2;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #7fb7ff;
}

.item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  background: #66a3ff;
}

.item3 {
  grid-column-start: 3;
  grid-column-end: span 2;
  background: #2e86ff;
}

.item4 {
  grid-column-start: 5;
  grid-column-end: 6;
  background: #185ecc;
}

.item5 {
  grid-column-start: 6;
  grid-column-end: -1;
  background: #0b4fa0;
}

.item small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grid-column-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.