⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

3 Equal Columns CSS Grid Layout

Design CSS Grid layouts visually: set columns, rows and gap, then type area names into cells to build grid-template-areas — with a live preview and copyable CSS and HTML.

Type a name into any cell below; cells with the same name merge into one grid-template-areas region.

Processing... 0%

Result

This page opens the grid generator set to three equal-width columns in a single row, with named areas switched off — the layout is just repeat(3, 1fr), the shortest way to say "three columns that always split the available width evenly."

Equal-width columns are the workhorse of card grids, pricing tables and image galleries: no area needs naming because every column plays the same role, so plain track sizing is clearer than a grid-template-areas declaration would be. Add a row and the same three tracks repeat underneath, still perfectly even.

Raise the column count for a denser grid, or switch on named areas if a later column needs to stand out from the rest — the CSS and HTML below update the moment you do. Everything runs client-side, so there is nothing to upload and nothing to wait on.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Number inputs for 1–6 columns and rows, plus separate column-gap and row-gap controls that combine into one gap value when they match.
  • A named-areas mode: type an area name straight into any cell of the live grid; the tool builds a valid grid-template-areas string and warns when names do not form clean rectangles.
  • Copyable CSS block (display: grid, grid-template-columns/rows, gap, grid-template-areas) plus a matching HTML skeleton with one grid-area div per named region.

Key Benefits

✓ Type a name straight into any cell and matching names merge into one grid-template-areas region — no drag-selection, no guessing the quoted-string syntax by hand.
✓ The live preview grid resizes and recolors on every change, so you see the exact column and row tracks and every named region before copying a single line of CSS.
✓ Presets like the classic holy grail layout and a narrow sidebar give you a real, working grid-template-areas declaration to start from instead of a blank grid.

Use Cases

  • • Build the classic holy grail page shell — full-width header and footer with a nav/main/aside middle row — by typing area names instead of hand-writing grid-template-areas.
  • • Lay out a settings page or admin dashboard with a fixed-width sidebar next to a flexible content column and copy the exact CSS and HTML once the live preview looks right.
  • • Check that a set of named areas actually forms valid rectangles before shipping — the tool flags the exact names that would break grid-template-areas in the browser.