Build two equal columns

Split the available space into two equal flexible columns.

Official sourceW3C CSS Grid Layout — track sizing and frReviewed: 2026-08-26

STEP 1 · LEARN

How it works

grid-template-columns defines explicit column sizes. The fr unit represents a fraction of leftover space; 1fr 1fr splits that space into two equal parts.

Correct example

.grid { display: grid; grid-template-columns: 1fr 1fr; }

Each column receives the same fraction of free space.

Common mistake

.grid { display: grid; grid-template-columns: 1fr; }

One value creates one explicit column, not two.

STEP 2 · APPLY

Your exercise

Enable Grid and create two equal columns with 1fr 1fr.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The section is a Grid container.
The grid has two equal columns.
The target element is present in the page.

Explain the solution logic

The container activates Grid, and the two fr values define two column tracks with equal weight.

How it works

Your exercise

Write and see the result

What needs to pass