CSS Grid Examples

Q: How do I make equal-width columns in CSS Grid?

Use grid-template-columns: repeat(4, 1fr) for four equal columns. Each 1fr takes an equal share of the available width.

Q: How do I make a grid item span two columns?

Set grid-column: span 2 on the item. It stretches across two column tracks starting from its current position.

Q: How do I build a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)). The column count adapts to the container width automatically.

A runnable gallery of CSS Grid patterns — equal columns, explicit rows, gaps, spanning, responsive tracks, centering, named areas, auto-fit and nested grids — each a live, editable demo.

XCODXExamples · Updated August 2, 2026

Overview

A runnable gallery of CSS Grid patterns — open any demo in the editor. For the model behind them read the CSS Grid basics, follow how to create a grid layout, check the grid-template-columns and gap references, or compare with CSS Flexbox.

Examples

Four equal columns

Explicit rows

Gap between cells

Span multiple columns

Responsive columns

Center items in the grid

Named grid areas

auto-fit column packing

Nested grid

Frequently asked questions

How do I make equal-width columns in CSS Grid?

Use grid-template-columns: repeat(4, 1fr) for four equal columns. Each 1fr takes an equal share of the available width.

How do I make a grid item span two columns?

Set grid-column: span 2 on the item. It stretches across two column tracks starting from its current position.

How do I build a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)). The column count adapts to the container width automatically.