grid-column
Definition
The grid-column property is a shorthand property that is used to specify both the start and end positions of a grid item along the column axis in a grid layout. It is equivalent to using the grid-column-start and grid-column-end properties separately.
Examples
Defining the start and end positions of a grid item using line numbers:
.grid-item {
grid-column: 2 / 4;
}
Defining the start position of a grid item and the number of columns it should span using named grid lines and the span keyword:
.grid-item {
grid-column: sidebar-start / span 2;
}
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr auto;
}
Values
| Value | Description |
|---|---|
<start-line> / <end-line> | Specifies the start and end positions of a grid item using line numbers or named grid lines |
<start-line> / span <n> | Specifies the start position of a grid item and the number of columns it should span using line numbers or named grid lines and the span keyword |
Best Practices
- Use the grid-column property to define the start and end positions of grid items along the column axis in a grid layout.
- Use line numbers or named grid lines to specify the start and end positions of grid items to make your layout more flexible and maintainable.
- Use the span value to span a grid item across multiple columns in the grid layout.
- Test your layout in different screen sizes and devices to ensure that your grid items are positioned correctly and that your content remains accessible.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The grid-column property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, support for the span value is not available in Internet Explorer. To ensure maximum browser compatibility, it is recommended to use specific line numbers or named grid lines rather than the span value. You can also use a fallback layout for older browsers that do not support CSS Grid by using feature detection or a polyfill like the CSS Grid Layout Polyfill.