CSS grid layout generator
Preview grid tracks and gaps and copy CSS.
Cara menggunakan CSS grid layout generator
CSS grid layout generator writes grid CSS from a column count, row count and gap, and previews numbered cells. Choose 1 to 12 columns and 1 to 12 rows with a 0 to 100 px gap; columns use repeat(n, minmax(0, 1fr)) so they share the width equally, and rows size automatically. Download the rules as a .grid class in grid.css.
- Enter the requested values in the settings panel.
- Set columns, rows, gap (px).
- Run css grid layout generator, review the output, then use the available copy or download controls.
Fungsi alat ini
Preview grid tracks and gaps and copy CSS.
- Columns
- Range: 1 to 12
- Rows
- Range: 1 to 12
- Gap (px)
- Range: 0 to 100
Batas dan pemrosesan
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.
Pertanyaan umum
Why does the grid use minmax(0, 1fr) instead of 1fr?
A plain 1fr track has an automatic minimum, so long words or wide content can stretch a column. minmax(0, 1fr) lets columns shrink below their content width, keeping all columns equal. The generator applies it to every column.
Can I make grid columns of different widths with this generator?
No. It produces equal-width columns with repeat() and rows set to auto height. For uneven tracks, copy the CSS and edit grid-template-columns by hand, for example to 2fr 1fr.
What does the grid CSS download contain?
grid.css contains a .grid selector with display: grid, the column and row templates and the gap. Add the class to your container element, or copy just the declarations from the text output into an existing rule.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.