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

Formal syntax: <grid-line> [ / <grid-line> ]?

grid-column: 1 / 3;

Values

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

Example

.class {
   grid-columns: 50% * * 4em; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X16???10.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
????10.36.0