How to span multiple columns in grid in css

CssHow-ToBeginner · 3 min read

How to Span Multiple Columns in CSS Grid: Simple Guide

To span multiple columns in CSS Grid, use the grid-column property with a start and end line or a span value, like grid-column: 1 / 3; or grid-column: span 2;. This tells the grid item to stretch across the specified number of columns.

📐

Syntax

The grid-column property controls how many columns a grid item spans. It accepts two main formats:

grid-column: start-line / end-line; — specifies the grid lines between which the item stretches.
grid-column: span number; — tells the item to span a certain number of columns starting from its current position.

Example: grid-column: 2 / 4; means the item covers columns 2 and 3.

css

/* Syntax examples */
.item {
  grid-column: 1 / 3; /* spans from column line 1 to 3 (covers 2 columns) */
}

.item {
  grid-column: span 2; /* spans 2 columns from current position */
}

💻

Example

This example shows a 3-column grid where the second item spans two columns using grid-column: span 2;. The first and third items each occupy one column.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid Column Span Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 20px auto;
  }
  .item {
    background-color: #4a90e2;
    color: white;
    padding: 20px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 6px;
  }
  .span-two {
    grid-column: span 2;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="item">Item 1</div>
    <div class="item span-two">Item 2 (spans 2 columns)</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output

A horizontal grid with three boxes: The first box labeled 'Item 1' in the first column, the second box labeled 'Item 2 (spans 2 columns)' stretching across the second and third columns, and the third box labeled 'Item 3' in the third column.

⚠️

Common Pitfalls

Common mistakes when spanning columns include:

Using grid-column: 1 / 4; on a grid with only 3 columns, which causes the item to overflow.
Forgetting that grid lines start counting at 1, so grid-column: 1 / 3; spans two columns, not three.
Mixing span with explicit line numbers incorrectly, like grid-column: span 2 / 4; which is invalid.

Correct usage example:

css

.wrong {
  grid-column: span 2 / 4; /* ❌ Invalid syntax */
}

.right {
  grid-column: span 2; /* ✅ Correct: spans 2 columns from current position */
}

/* Or using line numbers correctly */
.right-line {
  grid-column: 1 / 3; /* ✅ spans columns 1 and 2 */
}

📊

Quick Reference

Property	Description	Example
grid-column	Span grid item across columns using start/end lines	grid-column: 1 / 4;
grid-column	Span grid item across columns using span keyword	grid-column: span 3;
grid-column-start	Set the starting grid line	grid-column-start: 2;
grid-column-end	Set the ending grid line	grid-column-end: 5;

✅

Key Takeaways

Use grid-column with start/end lines or span to control column spanning.

Grid lines start at 1, so 1 / 3 spans two columns, not three.

Avoid invalid syntax like mixing span with line numbers in one declaration.

Check your grid's column count to prevent overflow when spanning columns.

Use the browser DevTools grid inspector to visualize column spans easily.