Генератор CSS Grid

Спроектируйте CSS-сетку визуально — задайте столбцы, строки, отступы и объединённые ячейки, затем скопируйте CSS grid-template. Всё работает в вашем браузере.

Генератор CSS Grid работает целиком в вашем браузере. Столбцы, строки, размеры дорожек, отступы и объединённые ячейки, которые вы настраиваете, никогда не покидают ваше устройство, и ничего не загружается в ArrayKit.

Открыть форматировщик CSS

Об инструменте Генератор CSS Grid

Генератор CSS Grid позволяет построить раскладку сетки на глаз и скопировать точный CSS, который она производит. Выберите число столбцов и строк, задайте размер каждой дорожки единицами fr, пикселями, процентами, auto или minmax() и установите отступ. Живой предпросмотр показывает сетку; щёлкните две ячейки, чтобы объединить их в охватывающую область, и инструмент запишет за вас соответствующие правила grid-column и grid-row. Последовательности из трёх и более одинаковых дорожек сворачиваются в repeat(), чтобы вывод оставался аккуратным, и вы можете переименовать селектор под свой класс. Создан для фронтенд-разработчиков, раскладывающих карточки, дашборды и каркасы страниц, которым нужен корректный CSS grid-template без ручного подсчёта линий. Редактор работает целиком в вашем браузере, поэтому ничего из введённого не загружается.

Возможности

Как использовать Генератор CSS Grid

  1. Выберите, сколько столбцов и строк нужно вашей раскладке
  2. Задайте размер каждой дорожки через fr, px, %, auto или minmax()
  3. Установите отступ и отступ столбцов, если он должен различаться
  4. Щёлкните две ячейки в предпросмотре, чтобы объединить охватывающую область
  5. Скопируйте сгенерированный CSS в свою таблицу стилей

Пример

Ввод

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Результат

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Три одинаковых столбца сворачиваются в repeat(3, 1fr), а объединённые ячейки охватывают три дорожки.

Частые ошибки и устранение неполадок

Часто задаваемые вопросы

Что выводит генератор CSS Grid?
Он производит правило контейнера с display: grid, grid-template-columns, grid-template-rows и gap, плюс по одному правилу grid-column / grid-row для каждой созданной вами объединённой области. Вы копируете весь блок в свою таблицу стилей.
Когда мои дорожки сворачиваются в repeat()?
Три и более одинаковых соседних дорожек сворачиваются в repeat(n, значение). Одна или две подряд остаются записанными явно, поскольку repeat() сокращает вывод только от трёх дорожек. Смешанные последовательности чередуют литеральные дорожки и группы repeat().
Как объединить ячейки, чтобы охватить несколько столбцов или строк?
Щёлкните одну ячейку в предпросмотре, затем щёлкните вторую ячейку. Инструмент выделяет прямоугольник между ними и записывает grid-column и grid-row с правильной начальной линией и охватом. Щёлкните объединённый блок снова, чтобы разделить его обратно на отдельные ячейки.
Можно ли использовать minmax(), auto и проценты для размеров дорожек?
Да. Каждая дорожка принимает значение fr, пиксельную длину, процент, auto или minmax(min, max). Голые числа трактуются как fr, а расстановка minmax() нормализуется, чтобы скопированный CSS был согласованным.
Почему сгенерированное правило использует селектор :nth-child()?
Объединённые области размещаются по позиции, поэтому инструмент нацеливается на дочерние элементы сетки в порядке исходного кода через :nth-child(). Переименуйте селектор контейнера в свой класс, и правила размещения последуют за ним автоматически.
Отправляется ли спроектированная мной сетка куда-либо?
Нет. Генератор CSS Grid строит CSS шаблона и размещения целиком в вашем браузере. Столбцы, строки, отступы и объединённые ячейки, которые вы задаёте, никогда не покидают ваше устройство и не загружаются в ArrayKit.

Связанные инструменты

Все инструменты ArrayKit