grid-column-end

grid-column-end supplies the inline-end boundary of a grid item’s area. It can identify a line or request a span measured from the opposite boundary.

A two-track span

The item starts at line 1 and ends two tracks later, at line 3. Span counts tracks crossed, not a fixed ordinal line from the container’s beginning.

<div class="layout">
  <div class="feature">Two tracks</div>
  <div>One track</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.feature {
  grid-column-start: 1;
  grid-column-end: span 2;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

End a note at the explicit grid boundary

The first column remains unused by the note. Its end is -1, the explicit grid’s last column line; adding a new explicit column moves that boundary.

<div class="layout"><p class="feature">From line 2 to the explicit end</p></div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  background: #f1f5f9;
}
.feature {
  grid-column-start: 2;
  grid-column-end: -1;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Values and defaults

The initial value is auto and this property is not inherited. Auto contributes no definite end line. Use nonzero line numbers, named lines, or a positive span count. Negative line numbers count backward from the explicit grid; negative or zero span counts are invalid.

A name can match a generated area-end line or an explicitly named line. If repeated names are used, an integer alongside the name selects an occurrence. Numeric out-of-range placement may create implicit columns.

Common mistakes

An item spanning three tracks crosses four boundaries including its start. Describing span 3 as “end at the third line” misses that distinction. The teaching code should use this longhand directly; a grid-column declaration can set it but conceals which constituent is responsible.

Learn grid-column-start and grid-auto-columns. Keep visual placement consistent with the document’s reading and focus order.

Sources and browser support

MDN: grid-column-end describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid placement specification defines line matching and shorthand behavior.