Grid Items: Placement and Sizing

Grid items can be placed anywhere in the grid — on specific cells, spanning multiple columns or rows, or left to auto-place according to the grid algorithm.

1. Grid Lines for Placement

Grid lines are the dividing lines of the grid. Columns are numbered 1 to n+1 (left to right), rows 1 to m+1 (top to bottom). Negative numbers count from the end.

.item {
  grid-column-start: 1;    /* Start at column line 1 */
  grid-column-end:   3;    /* End at column line 3 */
  grid-row-start:    1;
  grid-row-end:      2;
}

/* Shorthand: start / end */
.item {
  grid-column: 1 / 3;   /* Spans columns 1–3 (two cells wide) */
  grid-row:    1 / 2;   /* Occupies row 1 only */
}

/* Using -1 to mean "last line" */
.full-width { grid-column: 1 / -1; } /* Always spans full width */

2. span Keyword

Instead of specifying end line numbers, use span N to span N tracks:

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

/* Shorter: just span from auto-placed position */
.wide  { grid-column: span 2; }  /* This item takes 2 columns */
.tall  { grid-row: span 3; }     /* This item takes 3 rows */

3. grid-area Shorthand

Combines row-start / column-start / row-end / column-end:

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

4. Named Grid Lines

Place items using named lines for more readable code:

.container {
  grid-template-columns:
    [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows:
    [header-start] 80px [header-end body-start] 1fr [body-end];
}

.main-content {
  grid-column: main-start / main-end; /* More readable than 2 / -1 */
  grid-row:    body-start / body-end;
}

5. justify-self and align-self

Overrides the container's justify-items / align-items for individual grid items:

.item-center { justify-self: center; }  /* Center inside its cell (horizontal) */
.item-end    { align-self: end; }       /* Bottom of cell (vertical) */
.item-fill   { place-self: stretch; }   /* Shorthand for both — fills cell */

6. Auto Placement Algorithm

When items don't have explicit placement, the browser uses the auto placement algorithm to fill the grid:

/* Default: fills row by row */
.container { grid-auto-flow: row; }

/* Fill column by column */
.container { grid-auto-flow: column; }

/* Dense packing — fills holes left by large items */
.container { grid-auto-flow: row dense; }

dense — The Masonry Effect

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense; /* Fills gaps left by tall/wide items */
}
.gallery__item--tall  { grid-row: span 2; }
.gallery__item--wide  { grid-column: span 2; }
.gallery__item--large { grid-column: span 2; grid-row: span 2; }

7. Placing Items in the Same Cell (Overlap)

Grid items can overlap — unlike in regular flow layout:

.hero-image  { grid-column: 1 / -1; grid-row: 1; }
.hero-text   { grid-column: 1 / -1; grid-row: 1; z-index: 1; } /* Same cell */

8. Named Areas and Item Placement

.container {
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer  footer footer";
}

/* Each named area uses grid-line names automatically */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

9. Complete Placement Reference

Property	Controls
grid-column: 1 / 3	Span columns 1 to 3
grid-column: span 2	Span 2 columns from current position
grid-row: 2 / -1	From row 2 to last row
grid-area: 1 / 1 / 3 / 4	Row-start / col-start / row-end / col-end
grid-area: main	Use named area
justify-self: center	Horizontal alignment in cell
align-self: end	Vertical alignment in cell
place-self: center	Both axes aligned