CSS grid-column Property
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
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
<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
The following table will show you the current browser support for the CSS grid-column
property.
Desktop | |||||
16 | 57 | 52 | 44 | 10.1 |
Tablets / Mobile | |||||
57 | 52 | 43 | 10.3 | 6 | 57 |
Last updated by CSSPortal on: 2nd January 2024