Grid Placement

By default, grid items fill cells in order — first row, left to right, then the next row. But the real power of grid is placing items exactly where you want them.

Grid Column and Grid Row

You can tell an item to start and end at specific grid lines:

.item {
  grid-column: 1 / 3;
  /* starts at column line 1, ends at column line 3 */
}
    

Remember that a three-column grid has four column lines. 1 / 3 spans columns 1 and 2. You can also use span for a cleaner approach:

.item {
  grid-column: span 2;
  /* spans 2 columns */
  grid-row: span 1;
  /* spans 1 row */
}
    

span is easier to read: "this item spans 2 columns" is very clear.

Shorthand Placement

You can combine column and row into one line:

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

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

The grid-area order is row, column, row, column. It takes some getting used to, but it is very compact.

Grid Template Areas

The most intuitive way to place items is by naming areas. You define areas in the container, then assign items to them:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar  header"
    "sidebar  main"
    "sidebar  footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
    

This creates a classic page layout — sidebar on the left, header on top, main content, and footer at the bottom. The ASCII-art style makes it easy to visualize your layout right in the CSS.