CSS Grid Column
CSS Grid allows you to control where a Grid item starts and ends across the columns of a Grid container.
The grid-column property is used to define the starting and ending column lines of a Grid item.
What is grid-column?
The grid-column property controls the horizontal position and width of a Grid item.
It can be used to make an item span across one or more Grid columns.
Basic Syntax
.item {
grid-column: 1 / 3;
}The Grid item starts at column line 1 and ends at column line 3.
Therefore, the item spans across 2 columns.
Understanding Grid Column Lines
Every Grid column has column lines. These lines are used to position Grid items.
A four-column Grid has five vertical column lines.
Starting at a Specific Column
.item {
grid-column-start: 2;
}The Grid item starts at column line 2.
The browser automatically determines the remaining placement when an end position is not specified.
Ending at a Specific Column
.item {
grid-column-end: 4;
}The Grid item ends at column line 4.
Using grid-column-start and grid-column-end
.item {
grid-column-start: 1;
grid-column-end: 4;
}The item starts at column line 1.
The item ends at column line 4.
Therefore, the item spans across 3 columns.
grid-column Shorthand
.item {
grid-column: 1 / 4;
}This is a shorthand version of:
grid-column-start: 1;
grid-column-end: 4;The item spans from column line 1 to column line 4.
Using span
The span keyword allows an item to span a specific number of columns.
.item {
grid-column: span 2;
}The item spans across 2 columns.
The starting position is determined by the Grid's automatic placement.
Practical Example
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.header {
grid-column: 1 / 5;
}The Grid contains four equal columns.
The header starts at column line 1 and ends at column line 5.
Therefore, the header spans across all 4 columns.
Output
The Header spans all four Grid columns because the code uses grid-column: 1 / 5;.
Spanning Multiple Columns
.item {
grid-column: 2 / 4;
}The item starts at column line 2 and ends at column line 4.
Therefore, it occupies 2 columns.
Important Grid Column Properties
grid-column
Shorthand property used to define the start and end column lines.
grid-column-start
Defines the starting column line of a Grid item.
grid-column-end
Defines the ending column line of a Grid item.
Real-World Uses
- Website headers
- Dashboard layouts
- Navigation sections
- Featured content
- Course cards
- Admin dashboards
Summary
The grid-column property controls the horizontal placement of a Grid item. It can define where an item starts and ends using column lines. The grid-column-start and grid-column-end properties provide individual control, while grid-column provides a convenient shorthand.