CSS grid builder
Build tracks and named areas with a local grid preview and HTML/CSS.
- Runs in your browser
- No upload
- Check before download
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first.
Resource limits
Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 tracks per axis (fr/px/%/auto), gap 0–100px, up to 64 cells. Each named area must form one rectangle. A dot is an empty cell. Preview labels match exported items. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
How to use
- Configure the example
Add columns and rows, choose each track unit/size and gap. Fill area cells with repeated rectangular names or dots. Generate and inspect the item positions before exporting both HTML and CSS.
- Inspect before using
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first. Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 tracks per axis (fr/px/%/auto), gap 0–100px, up to 64 cells. Each named area must form one rectangle. A dot is an empty cell. Preview labels match exported items. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
- Export the checked result
Download result; Download original
Questions and limits
Resource limits
Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 tracks per axis (fr/px/%/auto), gap 0–100px, up to 64 cells. Each named area must form one rectangle. A dot is an empty cell. Preview labels match exported items. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
Offline design
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first.
Inspect before using
Add columns and rows, choose each track unit/size and gap. Fill area cells with repeated rectangular names or dots. Generate and inspect the item positions before exporting both HTML and CSS.