CSS grid-column property
The grid-column property in CSS is used to specify how a grid item should span across columns in a grid container. It allows you to control the start and end points of a grid item within the grid's column track.
Basic Syntax
selector {
grid-column: start / end;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns */
grid-gap: 10px; /* Space between grid items */
}
.item1 {
grid-column: 1 / 3; /* Spans from column line 1 to column line 3 */
background-color: lightcoral;
padding: 20px;
}
.item2 {
grid-column: 2 / 4; /* Spans from column line 2 to column line 4 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>
</body>
</html>
In this example, .item1 spans from the first column line to the third column line, covering two columns, while .item2 spans from the second column line to the fourth column line, covering two columns as well.
Values for grid-column
1. Start and End Line Numbers
You can specify the grid lines where the item should start and end.
grid-column: 1 / 3; /* Starts at the first column line and ends at the third column line */
2. Span Keyword
You can use the span keyword to specify how many columns the item should span.
grid-column: span 2; /* Spans across 2 columns */
3. Auto Placement
If only one value is provided, it defines the starting line, and the item will span to the end of the grid.
grid-column: 2; /* Starts at column line 2 and spans to the end of the grid */
4. Grid Area Placement
You can also use the grid-column property with grid-template-areas to position items based on named areas.
.grid-item {
grid-column: header;
}
Practical Examples
Example 1: Spanning Multiple Columns
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns */
grid-gap: 10px; /* Space between grid items */
}
.item1 {
grid-column: 1 / 3; /* Spans from column line 1 to 3 */
background-color: lightcoral;
padding: 20px;
}
.item2 {
grid-column: 2 / 4; /* Spans from column line 2 to 4 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>
</body>
</html>
Example 2: Spanning Columns with span
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* Four columns */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
padding: 20px;
}
.item1 {
grid-column: span 2; /* Spans 2 columns */
}
.item2 {
grid-column: span 3; /* Spans 3 columns */
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
</div>
</body>
</html>
Browser Support
The grid-column property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It has partial support in Internet Explorer (IE10 and IE11), with some limitations compared to modern browsers.