Placing CSS Grid Items

Placing CSS Grid Items

CSS Grid automatically places grid items when no position is specified, but individual items can also be placed precisely by referencing grid lines.

The grid-column, grid-row, and related properties control where an item starts, where it ends, and how many tracks it spans.

Automatic Grid Placement

Grid items are automatically placed when no explicit placement properties are applied.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

With the default auto-placement behavior, the items are placed into available cells in source order. After the first three items fill the three columns, the fourth item is placed in the next row.

This automatic behavior is useful when items do not require specific positions.

Placing Items in Columns

The grid-column-start and grid-column-end properties specify the column lines where an item begins and ends.

.item {
  grid-column-start: 2;
  grid-column-end: 4;
}

The item begins at column line 2 and ends at column line 4, so it occupies the space across two column tracks.

These properties control placement along the grid's inline axis.

Placing Items in Rows

The grid-row-start and grid-row-end properties specify the row lines where an item begins and ends.

.item {
  grid-row-start: 1;
  grid-row-end: 3;
}

The item begins at row line 1 and ends at row line 3, causing it to span two row tracks.

Column and row placement can be combined to position an item in a specific region of the grid.

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

The grid-column Property

The grid-column shorthand combines grid-column-start and grid-column-end.

.item {
  grid-column: 2 / 4;
}

The value before the slash identifies the starting grid line, and the value after the slash identifies the ending grid line.

This is equivalent to:

.item {
  grid-column-start: 2;
  grid-column-end: 4;
}

The grid-row Property

The grid-row shorthand combines grid-row-start and grid-row-end.

.item {
  grid-row: 1 / 3;
}

This places the item between row lines 1 and 3.

The grid-column and grid-row shorthands can be used together for concise two-dimensional placement.

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Spanning Multiple Tracks

The span keyword specifies how many tracks a grid item should occupy.

.item {
  grid-column: 1 / span 2;
}

The item starts at column line 1 and spans two column tracks.

If a starting line is not specified, the item can retain automatic placement while still spanning a specified number of tracks.

.item {
  grid-column: span 2;
}

The Grid auto-placement algorithm determines the item's position while ensuring that it spans two column tracks.

The same technique works with rows.

.item {
  grid-row: span 2;
}

Using Negative Line Numbers

Negative line numbers count backward from the end of the explicit grid.

.item {
  grid-column: 1 / -1;
}

The value -1 refers to the final line of the explicit grid. The item therefore spans from the first column line to the last column line.

This is useful for headers, footers, and other items that should span the full explicit grid even when the number of explicit columns changes.

The grid-area Shorthand

The grid-area property can place an item using four line-based values.

.item {
  grid-area: 1 / 2 / 3 / 4;
}

When four line values are used, their order is:

The example begins at row line 1 and column line 2, then ends at row line 3 and column line 4.

The grid-area property can also assign a named grid area. Named areas are covered in the next Grid Areas tutorial.

Placement and Auto-Flow

Explicitly placed items and automatically placed items can be used in the same grid.

.featured {
  grid-column: 1 / 3;
}

The featured item receives an explicit column position. Other items without placement declarations continue to use the Grid auto-placement algorithm.

The grid-auto-flow property controls the direction and packing behavior used for automatically placed items.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

The default row value fills each row by adding items across the inline axis before creating or moving to another row as needed.

Overlapping Grid Items

Grid items can occupy the same grid cells when their placement areas overlap.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.item-2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

Because these placement areas overlap, parts of the two items occupy the same Grid space.

The z-index property can control which overlapping grid item is painted above another when stacking needs to be adjusted.

.item-2 {
  z-index: 1;
}

Placement and Source Order

Grid placement can visually position items differently from their order in the HTML source.

.item-1 {
  grid-column: 3;
}
.item-2 {
  grid-column: 1;
}

Visual placement should not be used to create a logical reading order that differs from the document source. Screen readers and keyboard navigation generally follow the document structure rather than the visual Grid arrangement.

Keep the HTML source in a meaningful order and use Grid primarily to control visual layout.

Placing Grid Items Example

The following example uses column and row line placement to create a larger featured item, a two-column item, and a full-width item.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.item-2 {
  grid-column: 3 / 5;
}
.item-5 {
  grid-column: 1 / -1;
}

Open the example in the editor and change the line numbers or use span to see how each item's placement changes.