Design CSS Grid layouts visually with template columns, rows, gap, and area naming with code export.
Lay out the tracks first, then name the regions: CSS Grid Generator converts those visual choices into CSS for an explicit grid container. Configure column and row track lists, choose the gutter size, and assign names across cells; the export records them as grid-template-columns, grid-template-rows, gap, and grid-template-areas. The frequent surprise is that an area name does not place an element automatically. A child still needs a matching grid-area value, or another grid placement rule, to occupy that region.
A concrete input and expected output from the current implementation.
Input
Columns: 1fr 2fr Rows: 48px 120px Gap: 8px Areas: header header nav main
Expected output
display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 48px 120px; gap: 8px; grid-template-areas: "header header" "nav main";
The two area rows each contain two tokens, matching the two columns. Header occupies both cells in the first row, while nav and main occupy the left and right cells of the second row; gap creates an 8px row gutter and an 8px column gutter.
Columns and rows are independent ordered track lists. Entering 1fr 2fr for columns creates two flexible column tracks with flex factors of 1 and 2; entering 48px 120px for rows creates two fixed-height tracks. The gap sits between tracks rather than adding an outer margin. Content sizing can still affect flexible tracks, so the preview is not a pixel calculator.
The area map becomes quoted rows in grid-template-areas, with one token for each grid cell. Repeating the same name across neighboring cells defines one named region only when those cells form a rectangle. Every quoted row must contain the same number of tokens. An unnamed cell is represented in CSS by a dot placeholder.
Yes, when every occurrence forms one filled rectangle. For example, two adjacent header cells create an area spanning two columns. No, the same name cannot validly describe separated islands or an L-shape in one grid-template-areas declaration. Use distinct names or line-based placement for those cases.
Not by itself. Flexible tracks such as fr units respond to available space, but the number and arrangement of tracks remain as declared. To change a two-column area map into one column, provide another grid template under a media query or container query. Test long content because intrinsic minimum sizes can also prevent expected shrinking.
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.