# Генератор макетов CSS grid

> Показывает дорожки и промежутки сетки и позволяет скопировать CSS.

[Open tool](https://www.toolcabana.com/ru/css-grid-layout-generator) · [Дизайн и CSS](https://www.toolcabana.com/ru/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: ru. Description language: ru. Complete guide translation: yes.

## 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 (ru)

Показывает дорожки и промежутки сетки и позволяет скопировать CSS.

## Steps (ru)

1. Введите запрошенные значения в панели настроек.
2. Укажите столбцы, строки и промежуток (px).
3. Запустите «Генератор макетов CSS grid», просмотрите результат и используйте доступные элементы копирования или скачивания.

## Settings

- Столбцы (ru; key: columns; type: number); minimum: 1; maximum: 12
- Строки (ru; key: rows; type: number); minimum: 1; maximum: 12
- Промежуток (px) (ru; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (ru)

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Privacy and connections (ru)

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

## Questions (ru)

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

### Где обрабатываются мои данные?

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

### Каковы ограничения входных данных?

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Related tools

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