grid-column-start
Definition
The grid-column-start property is used to specify where a grid item should start in the grid layout along the column axis. It is used in combination with the grid-column-end property to define the grid placement of an item in the grid.
Examples
Defining the start position of a grid item with a line number:
.grid-item {
grid-column-start: 2;
grid-column-end: 4;
}
Using a named grid line to define the start position of a grid item:
.grid-item {
grid-column-start: sidebar-start;
grid-column-end: sidebar-end;
}
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr auto;
}
Spanning multiple columns with a grid item:
.grid-item {
grid-column-start: 2;
grid-column-end: span 2;
}
Values
| Value | Description |
|---|---|
auto | Default value that allows the grid to determine the start position of the grid item |
<line> | A line number indicating the start position of the grid item |
<name> | A named grid line that is defined in the grid-template-areas property |
span n | Specifies that the grid item should span n columns, where n is a positive integer |
Best Practices
- Always use the grid-column-start property in combination with grid-column-end to define the placement of grid items in the grid layout.
- Use positive line numbers to specify the start and end positions of grid items starting from the beginning of the grid and negative line numbers to specify positions starting from the end of the grid.
- Avoid using hard-coded values for line numbers, and instead use named grid lines defined in the grid-template-areas property 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-start 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 the grid-column-start property with 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.