CSS grid-column Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The grid-column CSS property is used to specify the range of columns that an element should span within a CSS Grid layout. It allows developers to control the placement and sizing of grid items along the horizontal axis of the grid. This property takes two values: the starting column line and the ending column line, allowing for precise control over the item's placement within the grid. By defining these values, web designers can create complex, responsive grid layouts, making it a valuable tool for designing modern web interfaces and achieving flexible and responsive designs. Individual properties are: grid-column-end and grid-column-start.

Initial value: See individual properties
Applies to: Grid Items
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.gridColumn

Interactive Demo

grid-column: 1;

grid-column: 1 / 3;

grid-column: 2 / -1;

grid-column: 1 / span 2;

One

Two

Three

Syntax

grid-column: grid-column-start | grid-column-end

Values

grid-column-startSpecifies on which column to start displaying the item.
grid-column-endSpecifies on which column-line to stop displaying the item, or how many columns to span.

Example

HTML

<div id="grid">

  <div id="item1"></div>

  <div id="item2"></div>

  <div id="item3"></div>

</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}
#item1 {
  background-color: lime;
}
#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}
#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

Result

Editor