📐 grid-column — Controlling Horizontal Placement in CSS Grid

🌐 What is grid-column?

grid-column is a CSS Grid item property that controls the horizontal placement of a grid item. It allows you to choose where an item starts and ends across the grid’s column lines.

>>“grid-column lets you stretch or position items anywhere across your grid columns.”

📌 Shorthand For

  • grid-column-start
  • grid-column-end

Meaning:grid-column: start / end;

🎯 Basic Syntax

grid-column Syntax

grid-column: <start-line> / <end-line>;

🧪 Example: Spanning 2 Columns

Span Across Two Columns

.item {
  grid-column: 1 / 3; 
  /* Starts at column line 1 and ends before column line 3 → spans 2 columns */
}
Media content

🔥 Using span Keyword

The span keyword lets you expand an item across multiple tracks.

Using span

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

Note

💡 span is useful when you're letting the grid auto-place items.

📐 Practical Example

Layout Example

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.header {
  grid-column: 1 / 5; /* full width */
}

.sidebar {
  grid-column: 1 / 2;
}

.content {
  grid-column: 2 / 5;
}

This layout creates:
• A full-width header
• A sidebar on the left
• A content area spanning the remaining columns

🧠 Understanding Grid Lines

Grid lines are the numbered boundaries between tracks.

Media content
ExpressionMeaning
1 / 3Start at line 1, end at line 3 → span 2 columns
2 / 5Start at line 2, end at line 5 → span 3 columns
span 2Stretch across 2 columns automatically

🧩 Combining grid-column with grid-row

Grid Placement in 2D

.hero {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

This makes the item span multiple rows and columns — great for hero banners or feature blocks.

📱 Responsive Use Case

Responsive grid-column

.card {
  grid-column: span 2;
}

@media (min-width: 800px) {
  .card {
    grid-column: span 1;
  }
}

On smaller screens, cards span 2 columns. On larger screens, they return to a tighter layout.

⚠️ Common Mistakes

  • Using column numbers that don’t exist in the grid
  • Trying to use grid-column on the container instead of items
  • Forgetting that the end line is exclusive (item stops before it)
  • Using only one number (must be start/end or span)

Note

🧠 Quick Tip: If the grid has 4 columns, it has **5 grid lines** (start & end included).

🔥 Summary

grid-column is a powerful property for controlling horizontal placement of grid items. It lets you create flexible, complex layouts with precision using grid lines or the span keyword.

>>“Master grid-column and you unlock the true 2D layout power of CSS Grid.”

Learn more ➜ MDN Docs 📘