The grid-column property lets you control how many columns a grid item spans and where it starts and ends horizontally.
Width control.
Line numbers.
Column count.
Start & end.
Default flow.
Child element.
The grid-column property in CSS is used in the context of CSS Grid Layout. It allows you to define how many columns an element should span within a grid container, and which columns it should start and end at.
This property simplifies the process of positioning elements within a grid, making layout design more flexible and efficient.
Apply grid-column on a child of a grid container (an element with display: grid). Use line numbers like 1 / 3 when you need precise placement. Use span 2 when you only care how many columns an item should cover.
Grid column lines are numbered starting at 1. So grid-column: 1 / 3 spans from line 1 to line 3, covering two column tracks.
The grid-column property can be defined using two different syntax formats: the shorthand syntax and the longhand syntax.
element {
grid-column: start / end;
}start — The starting grid line for the column.end — The ending grid line for the column.The grid-column property can also be set using the longhand properties grid-column-start and grid-column-end:
element {
grid-column-start: start;
grid-column-end: end;
}The default value for the grid-column property is auto, which means the item will be placed in the next available grid cell.
grid-column-start and grid-column-end.span n, named lines, and auto.-1 is the last line).| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Grid items |
| Inherited | No |
| Shorthand for | grid-column-start / grid-column-end |
| Full-width trick | grid-column: 1 / -1; |
| Value | Description |
|---|---|
auto | The element will be placed in the next available grid cell |
span n | The element will span n columns |
line number | Specifies the starting or ending line number of the grid |
name | A named grid line defined in the grid template |
Item 1 spans columns 1–2 with grid-column: 1 / 3 (highlighted):
Place items with line numbers and span, then try full-width banners and a sidebar layout.
Start with the reference example — line numbers and span values on a four-column grid.
Position items using column line numbers and the span keyword.
.item1 { grid-column: 1 / 3; }
.item2 { grid-column: 3 / 5; }
.item3 { grid-column: span 2; }Item 1 spans from line 1 to 3 (two columns). Item 2 spans lines 3 to 5. Item 3 uses span 2 to cover two columns from its auto-placed start.
Make a featured card twice as wide as its neighbors.
.hero {
grid-column: span 2;
}span 2 tells the hero card to cover two column tracks without needing exact line numbers.
Common real-world uses for column placement in page layouts.
Stretch an item across every column using negative line numbers.
.banner {
grid-column: 1 / -1;
}1 / -1 starts at the first column line and ends at the last line, spanning the full grid width.
Place a sidebar in the first column and main content across the remaining columns.
.sidebar { grid-column: 1 / 2; }
.main { grid-column: 2 / 4; }The sidebar occupies column 1. Main content spans columns 2 and 3 using lines 2 and 4.
<main> and <aside> alongside grid placement.grid-column Worksgrid-template-columns creates column tracks on the container.
You set start and end lines or a span on a grid item.
The item stretches across the specified column tracks horizontally.
Items cover exactly the columns you need for banners, heroes, and sidebars.
The grid-column property is widely supported in modern browsers, including recent versions of Chrome, Firefox, Safari, Edge, and Opera.
Column placement works in all major modern grid implementations.
Bottom line: Safe for modern projects. Test spanning layouts across browsers for consistent rendering.
The grid-column property is a powerful feature of CSS Grid Layout that provides precise control over the placement of elements within a grid. By defining the start and end positions of an element, you can create complex and responsive layouts with ease.
Experiment with different grid configurations to see how this property can enhance your web designs. Start with line numbers, then try span and 1 / -1 for common layout patterns.
span n for flexible column counts1 / -1 for full-width sectionsgrid-columnUse these points when placing items horizontally.
Horizontal size.
PurposeNext cell.
DefaultStart & end.
SyntaxTwo columns.
PatternNot container.
ScopeOpen the HTML editor, change grid-column values, and watch items span different columns.
5 people found this page helpful