CSS Grid Generator
Визуальный конструктор CSS Grid раскладок
Настройки сетки
Области (4)
Превью
CSS код
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
height: 400px;
}
.header {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.main {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.footer {
grid-column: 1 / 4;
grid-row: 3 / 4;
}О сервисе CSS Grid Generator
CSS Grid Generator позволяет создавать двумерные сетки визуально. Задайте количество колонок и строк, настройте gap, выравнивание и области — получите готовый CSS-код для копирования.
Часто задаваемые вопросы
Grid подходит для двумерных макетов: страницы с сайдбаром и контентом, карточки в сетке, сложные формы. Flexbox лучше для одномерных задач: навигация, центрирование, распределение элементов в строке. Часто их комбинируют: Grid для общей структуры, Flexbox внутри ячеек.
Единица fr (fraction) обозначает долю доступного пространства. 1fr 2fr 1fr создаёт три колонки, где средняя в два раза шире боковых. fr удобнее процентов, так как автоматически учитывает gap между ячейками.
Используйте repeat(auto-fill, minmax(200px, 1fr)) или repeat(auto-fit, minmax(200px, 1fr)). auto-fill создаёт пустые треки при нехватке элементов, auto-fit сжимает их. minmax задаёт минимальную и максимальную ширину колонки.
grid-area — сокращение для grid-row-start, grid-column-start, grid-row-end, grid-column-end. С именованными областями (grid-template-areas) можно задать grid-area: header и элемент займёт нужную область. Для простых случаев grid-column и grid-row читаются легче.
subgrid позволяет вложенной сетке наследовать треки родителя. Поддержка пока ограничена Firefox и Safari 16+. Для кроссбраузерности используйте явное задание колонок или ждите расширения поддержки в Chrome.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker