CSS Grid Lines and Item Placement

Between and around your tracks are grid lines, numbered from 1. A grid with three columns has four vertical lines (1, 2, 3, 4).

1
2

 line 1    line 2    line 3    line 4
   |  col 1  |  col 2  |  col 3  |

An item can start and end on any line.

1
2
3
4
5
6
7
8
9
10
11

<style>
  .grid > div { background: #d0e8f2; border: 1px solid #1a5276; padding: 10px; }
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .grid .wide { grid-column: 1 / 4; background: #fdebd9; }
  .grid .tall { grid-row: 2 / 4; background: #e0f2e9; }
</style>
<div class="grid">
  <div class="wide">grid-column: 1 / 4 (starts at line 1, ends at line 4)</div>
  <div class="tall">grid-row: 2 / 4</div>
  <div>3</div><div>4</div><div>5</div><div>6</div>
</div>

The first item spans three columns (from line 1 to line 4). The “tall” item spans two rows.

Shortcuts

Negative numbers count from the end. -1 is always the last line, which makes “full width” a safe thing to write however many columns exist.

Items can overlap

If two items are placed in the same cells, they overlap, and z-index decides which one is on top. This is useful for text over an image without needing position: absolute.