The grid-column-start property sets the column line where a grid item begins horizontally inside a CSS grid.
Begin column.
Default flow.
Exact start.
Column span.
Pair lines.
Child element.
The grid-column-start property in CSS is used in the context of CSS Grid Layout. It specifies the starting position of a grid item within a grid container by determining which grid line the item should start on.
This property is essential for placing grid items precisely within a grid layout.
Apply grid-column-start on a child of a grid container. Use a line number like 2 to skip the first column and start in the second track. Pair with grid-column-end or use the grid-column shorthand when you need both start and end defined together.
Column lines are numbered from 1, not 0. Line 1 is the left edge of the first column. So grid-column-start: 2 places the item at the start of the second column.
The syntax for the grid-column-start property is simple and can be defined using a grid line number, a named grid line, or special keywords:
element {
grid-column-start: value;
}.item1 { grid-column-start: 2; }
.item2 { grid-column-start: span 2; }The default value of the grid-column-start property is auto. This means the grid item will be placed automatically by the grid’s auto-placement algorithm.
span n, named lines, and auto.grid-column-end to define the full column span.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Grid items |
| Inherited | No |
| Controls | Starting column line |
| Shorthand partner | grid-column-end |
| Value | Description |
|---|---|
auto | Places the item automatically based on the layout algorithm |
line number | Specifies the grid line number where the item should start |
span n | When the end line is auto, spans n columns from the starting position |
named grid line | Uses a named grid line to determine the starting position |
Item 1 starts at column line 2 with grid-column-start: 2 (highlighted):
Start items at line 2, use span, pair with grid-column-end, and offset content from the first column.
Start with the reference example — line numbers and span on grid items.
Position items using a column line number and the span keyword.
.item1 { grid-column-start: 2; }
.item2 { grid-column-start: span 2; }Item 1 begins at column line 2. Item 2 uses span 2 to cover two columns from its auto-placed starting position.
Skip the first two columns by starting an item at line 3.
.offset-item {
grid-column-start: 3;
}Line 3 is the left edge of the third column track, so the item skips columns 1 and 2.
Combine start and end lines for exact column boundaries.
Define both the starting and ending column lines on one item.
.featured {
grid-column-start: 2;
grid-column-end: 4;
}Starting at line 2 and ending at line 4 spans columns 2 and 3. This is equivalent to grid-column: 2 / 4.
Leave the first column empty by starting main content at line 2.
.main {
grid-column-start: 2;
grid-column-end: -1;
}Column 1 stays open for spacing or a sidebar. Main content starts at line 2 and stretches to the last line.
<main> alongside grid placement.grid-column-start Worksgrid-template-columns creates numbered column lines.
You pick the column line where the item should begin.
The browser aligns the item’s left edge to that column line.
Items begin exactly where you specify in the column grid.
The grid-column-start property is supported in all modern browsers, including recent versions of Chrome, Firefox, Safari, Edge, and Opera.
Starting column placement works in all major modern grid implementations.
Bottom line: Safe for modern projects. Pair with grid-column-end or use grid-column shorthand.
The grid-column-start property is a powerful feature in CSS Grid Layout, allowing precise control over the placement of grid items. By mastering this property, you can create complex and responsive grid layouts with ease.
Experiment with different values to see how this property can enhance your web designs. Start with line numbers, then combine with grid-column-end for full column control.
grid-column-end for full spansgrid-column shorthand when setting bothgrid-column-startUse these points when setting the starting column line.
Begin column.
PurposeAuto-place.
DefaultExact start.
SyntaxTwo columns.
PatternFull span.
WorkflowOpen the HTML editor, change grid-column-start values, and watch items move to different columns.
5 people found this page helpful