# CSS grid layout generator

> Preview grid tracks and gaps and copy CSS.

[Open tool](https://www.toolcabana.com/el/css-grid-layout-generator) · [Design and CSS](https://www.toolcabana.com/el/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: el. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

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.

## Supported tasks (en)

Preview grid tracks and gaps and copy CSS.

## Steps (en)

1. Enter the requested values in the settings panel.
2. Set columns, rows, gap (px).
3. Run css grid layout generator, review the output, then use the available copy or download controls.

## Settings

- Columns (en; key: columns; type: number); minimum: 1; maximum: 12
- Rows (en; key: rows; type: number); minimum: 1; maximum: 12
- Gap (px) (en; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (en)

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.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### 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.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/el/css-clamp-calculator)
- [CSS flexbox playground](https://www.toolcabana.com/el/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/el/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/el/css-clip-path-maker)