CSS Grid Layout: A Complete Guide for Modern Web Design

What Is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that lets you arrange content in rows and columns simultaneously. Unlike Flexbox (which handles one dimension at a time), Grid excels at creating complex page layouts where both horizontal and vertical alignment matter.

Grid has transformed web layout from hack-based approaches (floats, absolute positioning, table layouts) into a declarative, intuitive system. You describe the layout you want, and the browser figures out how to achieve it.

Creating a Grid Container

Apply display: grid to a container element, and all direct children become grid items. Define the grid structure using grid-template-columns and grid-template-rows.

A three-column layout with equal widths uses grid-template-columns: 1fr 1fr 1fr (or the shorthand repeat(3, 1fr)). The fr unit represents a fraction of available space, distributing it proportionally among columns.

Fixed and flexible columns can be mixed. A layout with a 250px sidebar and a flexible content area uses grid-template-columns: 250px 1fr. The sidebar stays fixed while the content area fills the remaining space.

The gap property adds spacing between grid cells. Setting gap: 20px creates uniform 20-pixel gutters between all rows and columns without adding spacing at the container edges. This eliminates the common margin-based spacing headaches.

Placing Grid Items

By default, items fill the grid left to right, top to bottom, in source order. For custom placement, use grid-column and grid-row on individual items. An item spanning two columns uses grid-column: span 2. An item placed in a specific position uses grid-column: 2 / 4 (starting at line 2, ending at line 4).

Grid-template-areas provides a visual way to define layouts using named regions. You assign names to grid areas, then reference those names in a template that looks like an ASCII art representation of the layout. This makes complex layouts readable and maintainable.

Responsive Grid Patterns

Auto-fill and auto-fit: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) creates a responsive grid that automatically adjusts the number of columns based on available width. Each column is at least 300px wide, and the grid fills the container with as many columns as fit.

The difference between auto-fill and auto-fit matters when items do not fill the grid. Auto-fill creates empty tracks for unused space. Auto-fit collapses empty tracks, allowing items to expand to fill the container.

Media query-based: For more control, use media queries to redefine the grid template at different breakpoints. A three-column desktop layout might become two columns on tablets and one column on phones.

Common Layout Patterns

Holy grail layout: Header spanning full width, sidebar-content-sidebar middle row, and full-width footer. Grid makes this classic layout achievable in a few lines of CSS.

Card grid: A responsive grid of equally-sized cards that reflows from 4 columns on desktop to 2 on tablet to 1 on mobile. The auto-fill pattern handles this without media queries.

Dashboard layout: A fixed sidebar with a flexible main area containing a grid of widgets at various sizes. Nested grids allow the main content area to have its own grid layout independent of the page-level grid.

Grid vs. Flexbox

Grid is not a replacement for Flexbox; they complement each other. Use Grid for page-level and component-level two-dimensional layouts. Use Flexbox for one-dimensional arrangements within components: navigation bars, button groups, form field rows, and vertical centering.

Many modern layouts use Grid for the overall page structure and Flexbox for the internal layout of individual components. This combination covers virtually every layout need.

Use the CSS tools on CalcHub to experiment with grid layouts, or explore our developer tools for CSS utilities.

Build complex layouts easily with CalcHub’s CSS Grid tools.