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

Sidebar + Content 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 with a two-column, one-row layout already named: a 200px sidebar column next to a flexible content column that takes the remaining space. Both areas are visible in the live preview immediately, colored and labeled so the split is obvious at a glance.

This is the most common navigation-plus-content shape on the web — settings pages, documentation sites and admin dashboards all lean on a fixed-width rail beside a fluid main area. Because the sidebar column uses a pixel value and the content column uses 1fr, the sidebar stays a constant width while the content column absorbs every extra pixel of the viewport.

Rename either area, change the column width, or add more rows for a header above the split — the CSS and HTML output below track every edit in real time. The tool is free and keeps working entirely in your browser, with no upload and no account.

🛡️
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.