.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().
Как пользоваться генератором
- Задайте число колонок и строк, сетка сразу перестроится в предпросмотре.
- Настройте отступы
gapи выравнивание элементов по осям. - Скопируйте готовый CSS или Tailwind-классы одной кнопкой.
- Вставьте код в проект, раскладка работает во всех современных браузерах.
Примеры раскладок
Две колонки: сайдбар и контент
Фиксированный сайдбар слева и «резиновый» контент справа. Единица fr забирает всё свободное место.
.layout {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1.5rem;
}Адаптивная галерея
Карточки сами переносятся на новую строку. Связка auto-fill и minmax() даёт раскладку без медиазапросов.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 1rem;
}Раскладка страницы через grid-template-areas
Классический макет. Шапка, сайдбар, контент и подвал заданы по именам областей.
.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.