CSS Grid

Grid Items

Grid items are the direct children of a grid container. By default they flow into cells one by one, but you can override that and place any item exactly where you want using line numbers and the span keyword. This is what makes Grid so precise.

Grid Lines and Numbering

Grid tracks are bounded by grid lines, numbered starting at 1 on the left (and top). A grid with three columns has four vertical lines: 1, 2, 3 and 4. You position items by telling them which line to start and end on.

grid-column and grid-row

grid-column: 1 / 3 means start at column line 1 and end at column line 3 — spanning two columns. grid-row works the same way for rows. The shorthand grid-area combines both: row-start / column-start / row-end / column-end.

Property	Example	Effect
grid-column	1 / 3	Start at line 1, end at line 3 (spans 2 columns)
grid-column	span 2	Span 2 columns from wherever the item lands
grid-row	2 / 4	Occupy rows between lines 2 and 4
grid-area	1 / 1 / 2 / 4	row-start / col-start / row-end / col-end

Spanning Columns

In the example the first item spans all three columns by ending at line 4, acting like a banner across the top. The remaining items flow into the cells below.

A banner item spanning the full width

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px;
    background: #f1f5f9;
    font-family: sans-serif;
  }
  .cell {
    background: #6366f1; color: #fff; padding: 22px;
    border-radius: 6px; text-align: center; font-weight: 700;
  }
  .banner {
    grid-column: 1 / 4; /* span all three columns */
    background: #f59e0b;
  }
</style>
</head>
<body>
  <div class="grid">
    <div class="cell banner">Banner spans 1 / 4</div>
    <div class="cell">A</div>
    <div class="cell">B</div>
    <div class="cell">C</div>
  </div>
</body>
</html>

💡

grid-column: span 2 is often easier than counting lines: it spans two columns from wherever the item naturally falls, so the layout survives reordering.

Spanning Rows and Columns Together

An item can span both directions at once to create a feature tile. Here one item spans two rows and two columns, and the smaller items fill in around it — a classic gallery pattern.

A feature tile spanning 2 rows and 2 columns

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 90px;
    gap: 10px;
    padding: 10px;
    background: #f1f5f9;
    font-family: sans-serif;
  }
  .tile {
    background: #14b8a6; color: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
  }
  .feature {
    grid-column: span 2;
    grid-row: span 2;
    background: #db2777;
  }
</style>
</head>
<body>
  <div class="gallery">
    <div class="tile feature">Feature</div>
    <div class="tile">1</div>
    <div class="tile">2</div>
    <div class="tile">3</div>
    <div class="tile">4</div>
    <div class="tile">5</div>
  </div>
</body>
</html>

Aligning a Single Item

Just like flexbox, grid items can align themselves within their cell using justify-self (horizontal) and align-self (vertical). By default items stretch to fill the cell.

Positioning an item inside its own cell

.item {
  justify-self: center; /* horizontal within the cell */
  align-self: end;      /* vertical within the cell */
}

⚠️

Line numbers are 1-based and count the lines, not the tracks. For three columns the valid lines are 1 to 4. Ending at 4 spans to the far edge; ending at 3 stops one column short.

Key Points

Grid lines are numbered from 1; a track sits between two lines.
grid-column: start / end and grid-row: start / end place items by line.
The span keyword spans a number of tracks without counting lines.
grid-area is the four-value shorthand: row-start / col-start / row-end / col-end.
justify-self and align-self align a single item inside its cell.