PixelTool

CSS Grid генератор

Визуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.

Свойства

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

1
2
3
4
5
6

Сгенерированный CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
  grid-auto-flow: row;
}
grid grid-cols-[1fr 1fr 1fr] grid-rows-[1fr 1fr] gap-4 justify-items-stretch items-stretch justify-start content-start grid-flow-row

Что такое CSS Grid

CSS Grid — двумерная система раскладки: она управляет одновременно строками и колонками. Этим Grid отличается от Flexbox, который раскладывает элементы в одном направлении. Сетка задаётся свойствами grid-template-columns, grid-template-rows и gap, а размеры удобно задавать в долях fr и через minmax().

Как пользоваться генератором

  1. Задайте число колонок и строк — сетка сразу перестроится в предпросмотре.
  2. Настройте отступы gap и выравнивание элементов по осям.
  3. Скопируйте готовый CSS или Tailwind-классы одной кнопкой.
  4. Вставьте код в проект — раскладка работает во всех современных браузерах.

Примеры раскладок

Две колонки: сайдбар и контент

Фиксированный сайдбар слева и «резиновый» контент справа. Единица fr забирает всё свободное место.

Предпросмотр
sidebar
content · 1fr
.layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem;
}

Адаптивная галерея

Карточки сами переносятся на новую строку. auto-fill + minmax() — раскладка без медиазапросов.

Предпросмотр
1
2
3
4
5
6
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}

Раскладка страницы через grid-template-areas

Классический макет: шапка, сайдбар, контент, подвал — заданы по именам областей.

Предпросмотр
header
sidebar
main
footer
.page {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Основные свойства CSS Grid

Короткая шпаргалка по свойствам, которые настраивает генератор выше, — скопируйте нужное в свой CSS.

СвойствоЧто делает
grid-template-columnsЗадаёт число и ширину колонок. Значения — fr, px, %, minmax(), repeat().
grid-template-rowsЗадаёт число и высоту строк по тем же правилам, что и колонки.
gapОтступы между ячейками сетки. row-gap и column-gap задают их раздельно.
justify-items / align-itemsВыравнивание каждого элемента внутри ячейки по горизонтали и вертикали.
justify-content / align-contentВыравнивание всей сетки внутри контейнера, когда остаётся свободное место.
grid-auto-flowКак размещаются элементы автоматически: по строкам, колонкам или плотно (dense).
repeat() и minmax()repeat(auto-fit, minmax(12rem, 1fr)) — адаптивная сетка без медиазапросов.

Grid или Flexbox — что выбрать

Правило простое: Grid — для двумерных макетов (страница, галерея, дашборд), Flexbox — для одномерных (панель кнопок, меню, ряд карточек). Часто их сочетают: Grid задаёт крупную структуру страницы, Flexbox выравнивает элементы внутри ячеек. Для одномерных раскладок используйте генератор Flexbox, а глубже разобраться в Grid поможет подробный гайд по CSS Grid.

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

Другие полезные инструменты из той же категории

CSS Flexbox генератор

Визуальный генератор CSS Flexbox: настройте направление, выравнивание и перенос элементов и скопируйте готовый код CSS и Tailwind.

css
flexbox
+3

CSS Clamp калькулятор

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

css
responsive
+3

CSS калькулятор специфичности

Анализируйте специфичность CSS селекторов для понимания правил каскада

css
specificity
+3

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