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.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
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.
Example. Two columns and two rows with area names typed into the cells copy a grid-template-areas block of two quoted rows.
Limit. Columns and rows are each capped at 6, and gap cannot exceed 200.