Visually define grid-template-areas by painting named regions on a grid and export clean CSS.
CSS Grid Template Areas Editor turns a grid of painted labels into the quoted row syntax required by the CSS grid-template-areas property. Choose the grid dimensions, assign names such as header, sidebar, and main to cells, then copy the generated CSS for a grid container. The important constraint is geometric: every repeated name must occupy one solid rectangle. An L-shaped area or the same name in separated cells does not define a valid template area, even if the rows look readable.
A concrete input and expected output from the current implementation.
Input
2 x 2 painted grid: header | header sidebar | main
Expected output
grid-template-areas: "header header" "sidebar main";
The two quoted strings define two rows, each containing two cell tokens. Repeating header across both cells in the first row creates a rectangular area spanning two columns.
Each painted grid cell contributes one token to its row. Cells painted with the same name repeat that token. In exported CSS, an unassigned cell is written as a period token. The editor assembles cells from left to right into quoted rows, preserving the chosen row and column count.
Read each quoted string as one grid row and each whitespace-separated name as one column position. A named area may repeat horizontally and vertically only when all occurrences fill a rectangle. The declaration defines area placement, not track sizes; use grid-template-columns and grid-template-rows when explicit sizing is needed.
No. Under the grid-template-areas grammar, every occurrence of one name must describe a single filled rectangle. Diagonal, L-shaped, and disconnected occurrences make the declaration invalid. Give the pieces different names, or redesign the assignment so every cell inside the area's bounding rectangle has that same name.
No. grid-template-areas names the regions of the grid container, but it does not choose column widths, row heights, or gaps. It also does not connect a child automatically. Define track sizing separately and set grid-area on each child that should occupy a named region.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.