Генератор CSS Grid

Создайте двумерную сетку с явными и неявными дорожками и отдельными элементами. Разметку вычисляет браузер, а редактор показывает заданные правила.

Предпросмотр Grid

Настройки сетки

Размеры

Ширина образца

100–1600

Высота образца

100–1200

Отступы

Внутренний отступ

0–48

Разрыв между строками

0–100

Зазор столбца

0–100

Размещение и выравнивание

Направление

Режим письма

Автоматическое размещение

Выравнивание содержимого по inline

Выровнять контент

Выравнивание элементов по inline

Выровнять элементы

Режим размещения

Размеры дорожек

Перестановка дорожек не меняет размещение элементов. Отрицательные номера линий отсчитываются от конца явной сетки.

Явные столбцы

Дорожка 1

Размер дорожки

Минимум

Значение

0–1200

Максимум

Значение

0–12

Дорожка 2

Размер дорожки

Минимум

Значение

0–1200

Максимум

Значение

0–12

Дорожка 3

Размер дорожки

Минимум

Значение

0–1200

Максимум

Значение

0–12

Явные строки

Дорожка 1

Размер дорожки

Минимум

Значение

0–1200

Максимум

Значение

0–12

Дорожка 2

Размер дорожки

Минимум

Значение

0–1200

Максимум

Значение

0–12

Шаблон неявных столбцов

Дорожка 1

Размер дорожки

Размер

Шаблон неявных строк

Дорожка 1

Размер дорожки

Размер

Элементы в порядке исходного кода

Текст элемента

До 120 кодовых единиц UTF-16; текст не интерпретируется как HTML.

Порядок

-10–10

Размер шрифта

8–48

Выравнивание элемента по inline

Выравнивание элемента

Минимальный размер

Предпочтительная ширина

Предпочтительная высота

Размещение по столбцам

Правило размещения

Размещение по строкам

Правило размещения

Готовый код

.grid-demo {
  display: grid;
  box-sizing: border-box;
  width: 720px;
  height: 400px;
  padding: 16px;
  border: 1px solid #64748B;
  overflow: auto;
  direction: ltr;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
  grid-template-rows: minmax(80px, 1fr) minmax(80px, 1fr);
  grid-template-areas: none;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  row-gap: 12px;
  column-gap: 12px;
  justify-content: start;
  align-content: start;
  justify-items: stretch;
  align-items: stretch;
  color: #0F172A;
  background: #F1F5F9;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.grid-demo > .grid-item {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 1px solid #0F766E;
  background: #CCFBF1;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
}

.grid-demo > .grid-item-1 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-2 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-3 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-4 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-5 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-6 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

Явные столбцы: 3 · Явные строки: 2 · Элементы в порядке исходного кода: 6

Использование кода

Фрагмент HTML нуждается в CSS. В полной загрузке примера используется тот же документ, что и в предварительной версии, включая сброс документа и политику использования ресурсов.

Визуальный порядок и порядок в коде

Размещение, order и плотная упаковка могут менять визуальный порядок, но не порядок чтения или фокуса в HTML. Перемещайте элементы, чтобы изменить исходный порядок.

Размер предпросмотра

Кнопка подгонки меняет только масштаб рамки фиксированного размера. Она не создаёт адаптивные точки останова; при переполнении контейнер прокручивается.

Направления сетки

Столбцы: слева → справа; строки: сверху → снизу.

Параметры сетки

Размеры дорожек

Явные столбцы

minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)

Явные строки

minmax(80px, 1fr) minmax(80px, 1fr)

Шаблон неявных столбцов

auto

Шаблон неявных строк

auto

Элементы в исходном порядке

Элемент 1: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto
Элемент 2: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto
Элемент 3: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto
Элемент 4: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto
Элемент 5: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto
Элемент 6: Размещение по столбцам auto / auto; Размещение по строкам auto / auto · Порядок: 0 · Минимальный размер: auto

Размещение и выравнивание

Выравнивание содержимого располагает дорожки, а выравнивание элементов — элементы внутри областей. При гибких размерах или растяжении свободного места может не остаться.

Ваш пример генерируется локально. Этот инструмент не загружает и не сохраняет образец текста или кода.

Как создать пример сетки

Задайте размеры образца, дорожки, направление, интервалы и выравнивание.
Измените текст и размещение элементов или задайте именованные области. Исправьте незавершённые и конфликтующие поля.
Посмотрите результат, скопируйте CSS или HTML либо скачайте полный документ предпросмотра.

Как работают правила

Явные дорожки заданы шаблоном; автоматическое или вне его размещение может создавать неявные дорожки по отдельному повторяющемуся шаблону.

fr распределяет оставшееся пространство, а не процент внешнего размера. У 1fr есть автоматический минимум; minmax(0px, 1fr) его меняет. Минимумы элементов задаются отдельно.

Размещение, order и dense меняют визуальное расположение, но не порядок чтения или фокуса HTML. Перемещение элементов меняет исходный порядок.

Столбцы идут по inline, строки по block. При вертикальном письме их физические направления меняются. Подгонка не создаёт адаптивных точек останова.

Примеры

При ширине 640 px, границах по 1 px и отступах по 16 px ширина содержимого равна 606 px. После двух промежутков по 12 px и дорожки 120 px остаётся 462 px: при простых условиях 1fr и 2fr получают 154 и 308 px. Реальные размеры могут отличаться.

В сетке из трёх явных столбцов линия -1 означает последнюю явную линию, даже если возникнут неявные столбцы. Отрицательное число сохраняется в CSS.

Двухколоночная карта может содержать header в первой строке, nav и main во второй и footer в третьей. Каждая область — прямоугольник; пустые ячейки обозначаются точкой.

Границы редактора

На ось доступно 1–12 явных дорожек и 1–4 значения для неявного шаблона; всего 1–12 элементов. Поддерживаются minmax, линии, span и именованные прямоугольники, но не произвольный CSS.

Нет repeat, auto-fit, auto-fill, subgrid, masonry, вложенных сеток и редактора точек останова. Гибкие дорожки сами по себе не гарантируют адаптивность сайта.

Проценты вместе с промежутками могут переполнить контейнер. Содержимое, шрифты, минимумы, границы и прокрутка влияют на итоговые размеры.

Режим линий допускает перекрытие, но отклоняет равные или обратные конечные линии. Именованные области должны быть уникальны, находиться внутри явной сетки и не перекрываться.

Предпросмотр и файл используют общий документ со сбросом полей страницы. На реальном сайте фрагмент зависит от окружающих стилей и метрик браузера.

Локальный пример

Текст экранируется, код создаётся локально без загрузки и сохранения в URL или истории. Предпросмотр использует пустой sandbox и строгую политику ресурсов; это не гарантия для других сервисов или изменённого файла.

Вопросы о CSS Grid

Нет. Она только масштабирует рамку фиксированного размера и не создаёт медиазапросы или автоматическое повторение.

Нет. fr делит оставшееся пространство с учётом алгоритма Grid и минимумов; проценты имеют другую базу.

Дорожкам, промежуткам и содержимому может требоваться больше места. Контейнер прокручивается; минимумы и перенос слов не меняются скрытно.

Для элемента задаются min-width: 0px и min-height: 0px вместо автоматических минимумов. Это отдельно от минимума дорожки.

От конца явной сетки, а не от конца возникшей неявной сетки. Нулевая линия недопустима.

Имя должно быть допустимым и уникальным, прямоугольник — положительным, непересекающимся и внутри явной сетки.

Нет. Он может заполнить визуальные пробелы, не меняя исходный порядок HTML или фокус по умолчанию.

Тот же документ UTF-8, что предпросмотр: CSS, экранированный текст, сброс полей и ограничения ресурсов. Sandbox рамки в файл не переносится.

Источники

Спецификации, описывающие поведение примера.

Описания источников проверены 09.11.2026.

Разметку рассчитывает браузер; спецификации не удостоверяют эту реализацию.

SVG в PNG

Преобразуйте SVG-файл или вставленный код в PNG: задайте размер, прозрачный фон или цвет и используйте встроенные шрифты.

Открыть инструмент — SVG в PNG

Генератор CSS-фильтров

Настройте порядок эффектов, сравните образец и скопируйте объявление filter.

Открыть инструмент — Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.

Открыть инструмент — Калькулятор плавного размера шрифта

Генератор CSS-кнопок

Настройте состояния кнопки, проверьте фокус клавиатуры и скопируйте HTML и CSS.

Открыть инструмент — Генератор CSS-кнопок

Генератор CSS border-radius

Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.

Открыть инструмент — Генератор CSS border-radius

Генератор CSS Flexbox

Создайте пример Flexbox с элементами управления контейнером и элементами, явными осями макета, соответствующими CSS и HTML, а также локальной загрузкой полного примера.

Открыть инструмент — Генератор CSS Flexbox

Генератор CSS-тени текста

Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.

Открыть инструмент — Генератор CSS-тени текста

Генератор преобразований CSS

Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.

Открыть инструмент — Генератор преобразований CSS

Генератор теней CSS

Создавайте упорядоченные слои box-shadow с предпросмотром и копируйте код.

Открыть инструмент — Генератор теней CSS

Водяной знак на изображениях

Добавьте текст или логотип к изображениям, проверьте результаты и скачайте отдельные файлы или ZIP.

Открыть инструмент — Водяной знак на изображениях

Генератор CSS-градиентов

Создавайте линейные и радиальные градиенты с цветами, непрозрачностью и позициями.

Открыть инструмент — Генератор CSS-градиентов

Конвертер цветов

Преобразуйте поддерживаемые значения sRGB HEX, RGB и HSL с альфа-каналом и указанной точностью.

Открыть инструмент — Конвертер цветов

Изображение в текст (OCR)

Распознавайте печатный текст на локальных PNG и JPEG, выбирайте язык и проверяйте результат перед копированием или скачиванием.

Открыть инструмент — Изображение в текст (OCR)

Чтение QR-кода из изображения

Прочитайте один QR-код из локального PNG или JPEG и проверьте текст или байты, не открывая ссылки.

Открыть инструмент — Чтение QR-кода из изображения

Проверка контрастности цветов

Сравните цвета переднего плана и фона, настройте непрозрачность и проверьте числовые пороги контрастности WCAG для текста и важных деталей интерфейса.

Открыть инструмент — Проверка контрастности цветов

Калькулятор размера печати и разрешения

Рассчитайте размер отпечатка, нужное число пикселей и фактическое PPI с полями или обрезкой.

Открыть инструмент — Калькулятор размера печати и разрешения

Калькулятор соотношения сторон

Найдите соотношение ширины и высоты или рассчитайте новый размер в пикселях по одной заданной стороне.

Открыть инструмент — Калькулятор соотношения сторон

Сжатие изображений

Попробуйте уложить JPEG, PNG или WebP в заданный размер файла: проверьте результат и при желании уменьшите размеры изображения.

Открыть инструмент — Сжатие изображений

HEIC в JPG

Преобразуйте поддерживаемые HEIC-фото в полноразмерные JPG в браузере. Настройте качество и фон, скачайте проверенные файлы по отдельности или в ZIP.

Открыть инструмент — HEIC в JPG

Конвертер изображений

Конвертируйте поддерживаемые PNG, JPEG и WebP локально, настройте прозрачность, фон и качество и скачайте проверенные результаты.

Открыть инструмент — Конвертер изображений

Создать фотоколлаж

Расположите фотографии в сетке и скачайте PNG или JPEG.

Открыть инструмент — Создать фотоколлаж

Поворот и отражение изображений

Поверните или отразите набор локальных статичных PNG, JPEG и WebP, затем проверьте и скачайте обработанные изображения.

Открыть инструмент — Поворот и отражение изображений

Обрезать изображение

Обрежьте локальный JPEG, PNG или WebP с точностью до пикселя и скачайте результат в PNG или JPEG.

Открыть инструмент — Обрезать изображение

Изменить размер изображения

Измените размер JPG, PNG или WebP в пикселях или процентах, проверьте результат и скачайте его.

Открыть инструмент — Изменить размер изображения

Все инструменты этой категории

Настройки сетки

Размеры

Отступы

Размещение и выравнивание

Размеры дорожек

Явные столбцы

Дорожка 1

Дорожка 2

Дорожка 3

Явные строки

Дорожка 1

Дорожка 2

Шаблон неявных столбцов

Дорожка 1

Шаблон неявных строк

Дорожка 1

Элементы в порядке исходного кода

Размещение по столбцам

Размещение по строкам

Готовый код

Использование кода

Визуальный порядок и порядок в коде

Размер предпросмотра

Направления сетки

Размеры дорожек

Элементы в исходном порядке

Размещение и выравнивание

Как создать пример сетки

Как работают правила

Примеры

Границы редактора

Локальный пример

Вопросы о CSS Grid

Равен ли 1fr проценту?

Почему возникает переполнение?

Что меняет разрешение уменьшения ниже содержимого?

Откуда считаются отрицательные линии?

Почему именованная область отклонена?

Меняет ли dense порядок чтения?

Что содержит скачанный HTML?

Похожие инструменты

SVG в PNG

Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Генератор CSS-кнопок

Генератор CSS border-radius

Генератор CSS Flexbox

Генератор CSS-тени текста

Генератор преобразований CSS

Генератор теней CSS

Водяной знак на изображениях

Генератор CSS-градиентов

Конвертер цветов

Изображение в текст (OCR)

Чтение QR-кода из изображения

Проверка контрастности цветов

Калькулятор размера печати и разрешения

Калькулятор соотношения сторон

Сжатие изображений

HEIC в JPG

Конвертер изображений

Создать фотоколлаж

Поворот и отражение изображений

Обрезать изображение

Изменить размер изображения