CSS Grid Layout: A Practical Guide for Developers

CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time. Unlike Flexbox, which works in one direction, Grid gives you full control over the entire page structure. It is the best tool for building complex, responsive layouts with minimal code.

Getting Started

To create a grid container, set display: grid on the parent element. Then define columns and rows:

This creates a three-column grid where each column takes an equal fraction of available space. The fr unit is unique to Grid. It distributes available space proportionally, so 2fr 1fr makes the first column twice as wide as the second.

The repeat() Function

Instead of writing 1fr 1fr 1fr, you can use the repeat() function:

The auto-fill and auto-fit keywords combined with minmax() create fully responsive grids without media queries. This is one of the most powerful patterns in CSS Grid.

Grid Template Rows

Rows work the same way as columns. By default, rows auto-size to their content. You can set explicit row heights:

This creates a fixed header row (60px), a flexible content area that takes remaining space (1fr), and a footer that sizes to its content (auto).

Gap

The gap property sets spacing between grid tracks. You can set row and column gaps independently:

Placing Items on the Grid

By default, grid items fill cells in order. You can place items in specific positions using line numbers:

The -1 value refers to the last grid line. You can also use span to specify how many tracks an item should occupy: grid-column: span 2.

Grid Template Areas

Grid areas let you name sections of your layout and reference them visually in your CSS. This is the most readable way to define complex layouts:

Then assign elements to areas with grid-area: header. A period (.) represents an empty cell.

Alignment

Grid supports the same alignment properties as Flexbox, but applied in two dimensions:

• justify-items aligns items horizontally within their cell.
• align-items aligns items vertically within their cell.
• justify-content aligns the entire grid horizontally within its container.
• align-content aligns the entire grid vertically within its container.
• place-items is a shorthand for align-items and justify-items in one line.

Responsive Patterns Without Media Queries

The most popular responsive grid pattern requires zero media queries:

This creates as many columns as fit with a minimum width of 280px. On wide screens you get four columns, on tablets two, and on mobile one. It is perfect for card grids, product listings and image galleries.

When to Use Grid vs Flexbox

• Use Grid for page-level layouts, dashboards, image galleries, and anything that needs row-and-column alignment.
• Use Flexbox for component-level layouts like navbars, button groups, card content, and single-direction alignment.
• Use both together. A Grid page layout can have Flexbox components inside each grid cell. They complement each other perfectly.