grid-column-start

grid-column-start supplies the inline-start boundary of a grid item’s area. In left-to-right horizontal writing, that is its left edge. Grid lines are boundaries between tracks, not the tracks themselves.

Leave the first column empty

The item starts at line 2; its automatic end gives it a one-track span in this example. The empty first column makes the placement observable.

<div class="layout"><div class="feature">Starts at line 2</div></div>

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

Place a note using a named boundary

The template names the boundary before the wider content column. Using that name avoids tying the note to a hard-coded numeric line when the template is maintained.

<div class="layout"><p class="feature">A note in the content column</p></div>

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

Values and defaults

The initial value is auto and the property is not inherited. Auto supplies no definite start line. A nonzero integer selects a line; a negative integer counts from the explicit grid’s end. A name selects a matching line, with generated area-start names considered for a named area.

A start-side span such as span 2 counts back from a definite end. It is not simply another way to name “column 2.” Pair start and end deliberately, or use grid-column to show the full range together.

Troubleshooting

The item must participate in Grid placement. A later grid-column or grid-area shorthand can reset this longhand. Out-of-range numeric placement may create implicit tracks rather than produce an invalid declaration. Right-to-left writing changes where inline-start appears visually.

Learn grid-template-columns, direction, and grid-column-end next.

Sources and browser support

MDN: grid-column-start 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.