CSS Grid Items

Grid Line Numbers

A grid with 3 columns has 4 vertical grid lines (numbered 1 to 4), and a grid with 2 rows has 3 horizontal lines -- grid-column and grid-row place an item by naming which lines it starts and ends between.

Example: Grid Line Numbers

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
  padding: 8px;
}
.item {
  grid-column: 1 / 2;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Between lines 1 and 2</div>
</div>

grid-column: start / end

grid-column: 1 / 3 places an item starting at column line 1 and ending at column line 3, meaning it spans across the first two column tracks between those lines. Naming both start and end lines explicitly gives you precise, predictable placement regardless of how the grid is otherwise structured.

Under the hood, grid-column is shorthand for the two longhand properties grid-column-start and grid-column-end, which you can also set independently when only one edge of an item needs to move.

Example: grid-column: start / end

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
  padding: 8px;
}
.item {
  grid-column: 1 / 3;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Spans the first two tracks</div>
</div>

grid-row: start / end

grid-row works identically to grid-column but for the vertical axis -- grid-row: 2 / 4 spans an item across row tracks 2 and 3, stopping at row line 4. Combining an explicit grid-row with an explicit grid-column pins an item to an exact rectangular block anywhere in the grid.

Just like grid-column, grid-row is shorthand for grid-row-start and grid-row-end, which are useful to set independently when repositioning only one edge of an item without disturbing the other.

Example: grid-row: start / end

<style>
.container {
  display: grid;
  grid-template-rows: 60px 60px 60px;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
}
.item {
  grid-row: 2 / 4;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Spans rows 2 and 3</div>
</div>

Spanning with the span Keyword

Instead of naming both lines, grid-column: span 2 tells an item to span 2 columns starting from wherever it would normally be placed -- more flexible than hardcoding exact line numbers when content order might change.

Example: Spanning with the span Keyword

<style>
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #eee;
}
.item {
  grid-column: span 2;
  background: steelblue;
  color: white;
  padding: 8px;
}
</style>
<div class="container">
  <div class="item">Spans 2 columns from wherever it lands</div>
</div>

grid-area Shorthand for All Four Lines

grid-area: 1 / 1 / 3 / 3 sets row-start, column-start, row-end, column-end in one declaration (that order), placing an item into a 2x2 block starting at the top-left corner.

Example: grid-area Shorthand for All Four Lines

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #eee;
}
.item {
  grid-area: 1 / 1 / 3 / 3;
  background: steelblue;
  color: white;
  padding: 8px;
}
</style>
<div class="container">
  <div class="item">2x2 block from the top-left corner</div>
</div>