CSS Grid: Placing Items on the Grid

Why it exists

Before CSS Grid, creating two-dimensional layouts was a hack. Developers used floats, tables, or complex Flexbox nesting to arrange elements in both rows and columns. CSS Grid was introduced to provide a native, robust system for true 2D layout, solving the core problem of arranging content along two axes simultaneously.

The mental model

Think of a grid container as a piece of graph paper. By declaring display: grid, you create a set of intersecting horizontal and vertical lines that define columns and rows. Your direct child elements become grid items, which you can then place onto this graph paper with precision, like plotting points on a coordinate system.

How it works

You control item placement in two main ways. First, explicit placement. You tell an item exactly where to go using properties like grid-column-start and grid-row-start. For example, grid-column: 1 / 3; tells an item to start at the first column line and end at the third, spanning two columns. You can also name your grid lines and areas for more semantic code. Second, auto-placement. If you don't give an item a specific position, the browser's grid algorithm places it for you. It finds the next available empty cell, typically moving across columns before dropping to the next row.

When to use it

Use explicit placement for foundational layout elements like a page's header, sidebar, main content area, and footer. This ensures your key components are exactly where you expect them to be. Use auto-placement for homogenous collections of items, like a photo gallery or a list of product cards, where the browser can efficiently handle the flow.

When not to use it

Avoid relying solely on auto-placement when the visual order of items is critical for accessibility or user understanding. A change in the number of grid columns (e.g., on a smaller screen) can cause items to reflow in a non-intuitive order. For layouts that only need to control one dimension (either a row or a column), Flexbox is often a simpler choice.

One canonical example

To create a classic sidebar layout, you can define a two-column grid and explicitly place your items. Given a container with header, main, aside, and footer elements, the CSS would be: .container { display: grid; grid-template-columns: 3fr 1fr; } header { grid-column: 1 / 3; } main { grid-column: 1 / 2; } aside { grid-column: 2 / 3; } footer { grid-column: 1 / 3; }. The header and footer span both columns, while the main content and sidebar occupy their own.