TL
Tool Lab
💰Пожертвовать
💰Пожертвовать

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Об этом инструменте

Генератор CSS Grid позволяет визуально проектировать двумерные сеточные макеты, настраивая grid-template-columns, grid-template-rows, свойства gap и параметры выравнивания. Живой предпросмотр показывает результат до написания кода.

CSS Grid — самая мощная система макетов в CSS, разработанная для двумерных макетов (строки И столбцы одновременно). Дополняет Flexbox, который обрабатывает одномерные макеты.

Как использовать

  1. Задайте grid-template-columns для определения структуры столбцов. Используйте пресеты для распространённых паттернов.
  2. При необходимости задайте grid-template-rows (для большинства макетов оставьте auto).
  3. Настройте column-gap и row-gap для отступов.
  4. Используйте justify-items и align-items для управления размещением элементов в ячейках.
  5. Изменяйте количество элементов ползунком, чтобы наблюдать реакцию сетки.
  6. Нажмите Копировать для копирования сгенерированного CSS.

Случаи использования

Фронтенд-разработчики используют CSS Grid для макетов страниц, структур дашбордов и галерей изображений. Дизайнеры экспортируют спецификации сетки как точный CSS для передачи разработчикам. Команды дизайн-систем прототипируют паттерны отступов и колонок.

Частые вопросы

  • Что означает 1fr? — fr — это дробная единица. 1fr означает одну долю доступного пространства. repeat(3, 1fr) создаёт три равные колонки.
  • Когда использовать Grid, а когда Flexbox? — Grid для двумерных макетов (строки и столбцы). Flexbox для расположения элементов в одном направлении.
  • CSS Grid поддерживается во всех браузерах? — Да. CSS Grid полностью поддерживается всеми современными браузерами с 2017 года.