CSS grid-column Property

Description

The grid-column property controls a grid item's placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration.

Initial value
See individual properties
Applies to
Grid Items
Inherited
No
Media
Visual
Computed value
See individual properties
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.gridColumn

Syntax

grid-column: <grid-line> [ / <grid-line> ]?

Values

  • <grid-line> [ / <grid-line> ]

Example

<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
#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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0

Last updated by CSSPortal on: 3rd November 2019