Генератор CSS Grid
Создайте объявление контейнера CSS Grid — display: grid с равной шириной столбцов, равной высотой строк и промежутком — из простых элементов управления столбец/строка/промежуток.
Ввод
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-grid-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"columns": "3",
"rows": "2",
"gap": "16"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-grid-generator` tool (CSS Grid Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-grid-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Grid — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое CSS Grid?
CSS Grid — это система макета, предназначенная для двумерного дизайна — строки и столбцы одновременно, в отличие от Flexbox, который размещает элементы вдоль одной оси. Чтобы превратить любой элемент в сетку, требуется одно объявление display: grid; плюс описание дорожек, которые она должна иметь. Этот инструмент генерирует это объявление для наиболее распространённого случая: сетка с равномерным разделением с столбцами равной ширины и строками равной высоты с согласованным расстоянием между ячейками.
Свойства, которые генерирует этот инструмент
display: grid;— превращает элемент в контейнер сетки; его прямые потомки автоматически становятся элементами сетки.grid-template-columns: repeat(N, 1fr);— создаётNстолбцов, каждый занимающий равную долю (1fr) доступной ширины.repeat()— это сокращение для записи1frNраз.grid-template-rows: repeat(M, 1fr);— та же идея применяется к строкам:Mстрок равной высоты.gap: Npx;— расстояние между строками и столбцами, заменяющее старую паруgrid-row-gap/grid-column-gapодним сокращением.
Как использовать этот инструмент
- Переместите ползунок Столбцы, чтобы установить количество столбцов равной ширины, которые должна иметь сетка (1–12).
- Переместите ползунок Строки, чтобы установить количество строк равной высоты (1–12).
- Переместите ползунок Gap, чтобы установить расстояние в пикселях между ячейками сетки.
- Скопируйте сгенерированный CSS из поля CSS или загрузите его как файл
.cssи примените к вашему элементу контейнера — например,.grid-container { ...сгенерированный CSS... }.
Результат обновляется мгновенно при перемещении любого ползунка — отдельного шага «generate» нет.
FAQ
Нужно ли добавлять что-нибудь к дочерним элементам?
Нет. Когда у родителя есть display: grid; и дорожки шаблона, дочерние элементы размещаются автоматически, заполняя ячейки слева направо, сверху вниз. Вам нужен дополнительный CSS для дочернего элемента только если вы хотите, чтобы он занимал несколько ячеек (grid-column: span 2;) или находился в определённом месте.
Что означает 1fr?
fr расшифровывается как "fraction" — уникальная единица для Grid. 1fr означает «одна часть любого оставшегося пространства после учёта дорожек фиксированного размера и промежутков». Поскольку каждый столбец здесь использует 1fr, доступная ширина равномерно распределяется между всеми ними, и сетка автоматически изменяет размер вместе с контейнером.
Могу ли я сделать столбцы разной ширины, такие как 200px 1fr 200px?
Этот инструмент ориентирован на случай столбец-одинаковый/строка-одинаковая, который охватывает большинство макетов сетки (галереи изображений, сетки карточек, панели управления). Для смешанных фиксированных/гибких дорожек замените сгенерированное значение repeat(N, 1fr) на ваш собственный список размеров, разделённых пробелом (200px 1fr 200px) — остаток объявления остаётся неизменным.
В чём разница между gap и margin/padding?
gap добавляет пространство только между ячейками сетки — никогда не добавляет пространство вокруг внешнего края контейнера сетки так, как это делают margin или padding. Это делает его более предсказуемым выбором для согласованного внутреннего расстояния.
CSS Grid поддерживается во всех браузерах?
Да. display: grid и свойства, которые генерирует этот инструмент, поддерживаются без префиксов во всех основных браузерах с 2017 года.
Конфиденциальность
Всё происходит в вашем браузере. Никакой CSS, значения или параметры, которые вы вводите, никогда не отправляются на сервер — объявление генерируется и обновляется локально при перемещении ползунков.