Генератор макетов CSS grid
Показывает дорожки и промежутки сетки и позволяет скопировать CSS.
Как использовать Генератор макетов CSS grid
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.
- Введите запрошенные значения в панели настроек.
- Укажите столбцы, строки и промежуток (px).
- Запустите «Генератор макетов CSS grid», просмотрите результат и используйте доступные элементы копирования или скачивания.
Что поддерживает этот инструмент
Показывает дорожки и промежутки сетки и позволяет скопировать CSS.
- Столбцы
- Range: 1 to 12
- Строки
- Range: 1 to 12
- Промежуток (px)
- Range: 0 to 100
Ограничения и обработка
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.
Частые вопросы
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 требуется браузер.