📍 Grid Item Placement and Alignment

Lines, Areas & Numbering

Every item you place references grid lines — the numbered dividers between tracks. Numbering starts at 1 on the left/top and, crucially, also runs backwards from the end: -1 is the last line, -2 the second-to-last, and so on. That backward numbering is your best friend when the track count is dynamic.

A grid area is any rectangle bounded by four lines: a single cell, a run of cells, or a region named through grid-template-areas. Think of areas as rooms — each has defined walls, and some are bigger than others.

Line-Based Placement

Four long-hand properties pin an item to specific lines; two shorthands express the same thing more compactly.

/* Long-hand */
.item {
  grid-row-start: 1;
  grid-row-end: 3;      /* occupies rows between line 1 and line 3 */
  grid-column-start: 2;
  grid-column-end: 4;
}

/* Shorthand: start / end */
.item {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}

Negative lines for end-anchored items

Because -1 is always the final line, negative numbers let you anchor to the end without knowing the track count:

/* Full-width banner, no matter how many columns */
.banner { grid-column: 1 / -1; }

/* Bottom-right cell of any grid */
.badge {
  grid-row: -2 / -1;
  grid-column: -2 / -1;
}

Named lines

If the container named its lines (or you used grid-template-areas, which creates *-start/*-end names for free), place items with words:

.header  { grid-column: sidebar-start / content-end; }
.sidebar { grid-row: main-start / footer-end; }

The span Keyword

Often you care how many tracks an item covers, not exactly where it ends. The span keyword says "start here, then cover N tracks":

.feature {
  grid-column: 1 / span 3;   /* start at line 1, cover 3 columns */
  grid-row: 2 / span 2;      /* start at line 2, cover 2 rows */
}

/* Span backwards from the end */
.tail { grid-column: span 2 / -1; }  /* cover 2 columns, ending at the last line */

It's like asking a restaurant for "a table for four" instead of "table number 12" — you state the size, not the exact spot. This keeps layouts resilient when the surrounding track count changes.

The grid-area Shorthand

grid-area wears two hats.

1) Assign a named area

.container {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
}
.header  { grid-area: header; }
.content { grid-area: content; }

2) Place with four lines at once

As a pure placement shorthand, grid-area takes four values in a clockwise-ish order that trips everyone up at first:

/* grid-area: row-start / column-start / row-end / column-end */
.item { grid-area: 1 / 2 / 3 / 4; }

The four-value form is compact but hard to read; for anything complex, named areas or separate grid-row/grid-column declarations are kinder to the next developer.

Auto vs. Explicit Placement

You can mix both strategies in a single grid: pin the important items, and let the rest flow.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
}

/* One explicitly placed hero */
.featured {
  grid-column: 1 / 3;   /* first two columns */
  grid-row: 1 / 3;      /* first two rows */
}

/* Everything else auto-places around it */
.gallery-item { /* no placement — flows automatically */ }

It's like a restaurant with one reserved table (explicit) while other diners are seated wherever there's room (auto). The auto-placement algorithm — steered by the container's grid-auto-flow — fills the remaining cells, flowing around your pinned hero.

Per-Item Alignment

The container's justify-items/align-items set defaults for all items. Any single item can override them with the -self variants. By default items stretch to fill their cell.

.item {
  justify-self: end;      /* push to the right of its cell */
  align-self: center;     /* center vertically in its cell */
  place-self: center end; /* shorthand: align-self=center, justify-self=end */
}

order & z-index

Reordering with order

Every grid item has order: 0 by default and paints in source order. Change the number to move an item visually without touching the HTML — lower orders come first, and equal orders keep source order.

.promo   { order: -1; }  /* jump to the front */
.legal   { order: 1; }   /* drift to the back */

Layering with z-index

Items placed in overlapping cells stack. Unlike positioned elements, grid items obey z-index without needing position: relative:

.card { display: grid; grid-template: repeat(12, 1fr) / repeat(12, 1fr); }

.card-image   { grid-area: 1 / 1 / 13 / 13; z-index: 1; }
.card-overlay { grid-area: 8 / 1 / 13 / 13; z-index: 2; }
.card-text    { grid-area: 9 / 2 / 12 / 12; z-index: 3; color: #fff; }

Here an image fills the whole card, a gradient overlay covers its lower third, and the text sits on top — three items sharing cells, layered by z-index. Perfect for hero cards, badges, and captions.

Hands-on Exercise

.article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(min-content, auto);
  gap: 20px;
  padding: 30px;
}

.article-header { grid-column: 1 / -1; text-align: center; }
.article-image  { grid-column: 1 / -1; }
.article-lead   { grid-column: 3 / 11; font-size: 1.2em; }
.article-body   { grid-column: 3 / 11; line-height: 1.6; }

.article-quote {
  grid-column: 2 / 6;
  align-self: center;
  font-size: 1.4em;
  font-style: italic;
  border-left: 4px solid currentColor;
  padding-left: 1rem;
}

.article-sidebar {
  grid-column: 8 / 12;
  grid-row: span 2;
  align-self: start;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .article { grid-template-columns: 1fr; }
  .article > * { grid-column: 1; }
}

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Line-based Placement
• CSS-Tricks — Things I've Learned About CSS Grid
• Grid by Example — Patterns
• MDN — Box Alignment in Grid

🚀 What's Next?

You've now completed the full CSS Grid toolkit — container and items alike. Next we step back to the bigger picture with Responsive Design Philosophy, where these layout tools serve a mobile-first, content-driven strategy.