CSS Grid Layout Guide

CSS Grid is the most powerful layout system available in CSS. Unlike Flexbox which is one-dimensional, Grid is two-dimensional — giving you control over rows and columns simultaneously. This guide covers everything from basic track definitions to complex template areas.

Defining a Grid

Use display: grid on a container element, then define your columns and rows with grid-template-columns and grid-template-rows. The fr unit distributes available space proportionally.

The fr Unit

One fr represents one fraction of the available space in the grid container. A three-column grid with 1fr 2fr 1fr gives the middle column twice the width of the others.

Grid Template Areas

Named template areas let you define your layout visually using ASCII-art-style strings. Each word in the string corresponds to a grid cell, and repeated words span multiple cells.

Auto-Placement

The Grid auto-placement algorithm positions items that do not have explicit placement rules. Control its behaviour with grid-auto-flow, which accepts row, column, or dense.