Генератор CSS Grid
Живой просмотр
Зачем использовать визуальный генератор CSS Grid?
CSS Grid — самая мощная система макетов в CSS, но её синтаксис — grid-template-columns, grid-template-rows, единицы fr, minmax(), repeat() — имеет крутую кривую обучения. Наш визуальный генератор позволяет настраивать сетку через слайдеры и выпадающие списки и видеть макет, мгновенно обновляющийся, чтобы понять эффект каждого свойства без погружения в документацию MDN.
Живой просмотр сетки
Видите обновление сетки в реальном времени при настройке колонок, строк, отступов и выравнивания
Поддержка единиц fr
Шаблоны используют дробные единицы (fr) для гибких адаптивных сеток, подстраивающихся под размер контейнера
Готовый CSS для использования
Экспортирует чистый блок CSS .container с grid-template-columns, rows, gap и align-items
Как создавать CSS Grid-макеты
Установите колонки и строки
Используйте слайдеры, чтобы определить количество колонок и строк вашей сетки
Выберите шаблон и отступы
Выберите шаблон колонок (равные, фиксированные+гибкие, адаптивный minmax) и настройте промежутки между ячейками
Скопируйте CSS
Нажмите 'Копировать CSS' для полного блока CSS готового для вставки в таблицу стилей
Случаи использования CSS Grid
Макеты страниц
Создавайте структуры шапка/боковая панель/основной контент/подвал с именованными областями сетки
Информационные панели
Создавайте сложные макеты панелей управления с карточками разных размеров через grid-column и grid-row span
Фотогалереи
Создавайте галереи в стиле кирпичной кладки или однородные с auto-fill и minmax для адаптивности
Макеты журналов
Создавайте редакционные макеты с асимметричными колонками и выделенными элементами, охватывающими несколько ячеек
Лучшие практики CSS Grid
✓ Предпочитайте единицы fr процентам
Единица fr (дробная) распределяет доступное пространство после колонок фиксированного размера, избегая ручного расчёта процентов для гибких колонок.
✓ Используйте minmax() для адаптивных сеток
repeat(auto-fill, minmax(250px, 1fr)) создаёт адаптивную сетку, автоматически корректирующую количество колонок — без медиа-запросов.
✓ Используйте именованные области сетки
grid-template-areas с именованными ячейками (header, sidebar, main, footer) делает макеты страниц читаемыми и лёгкими для изменения.
✓ Понимайте auto-fill vs auto-fit
auto-fill создаёт как можно больше дорожек (оставляя пустые). auto-fit сворачивает пустые дорожки и расширяет существующие элементы — как правило, лучше для сеток карточек.
❓ Часто задаваемые вопросы
Что такое единица fr в CSS Grid?
fr означает 'дробная единица'. 1fr представляет долю доступного свободного пространства в контейнере сетки. repeat(3, 1fr) создаёт 3 равные колонки, делящие всё доступное пространство поровну.
Чем CSS Grid отличается от Flexbox?
Flexbox одномерный — он располагает элементы вдоль одной оси (строка или колонка). CSS Grid двумерный — управляет строками и колонками одновременно, что делает его намного мощнее для макетов страниц.
Что делает minmax()?
minmax(min, max) определяет диапазон размеров для дорожки сетки. minmax(200px, 1fr) означает, что колонка имеет минимум 200px ширины, но может расти для заполнения доступного пространства — идеально для адаптивных сеток.
Когда использовать CSS Grid вместо Flexbox?
Используйте Grid для 2D-макетов, где нужно одновременно управлять строками и колонками. Используйте Flexbox для 1D-макетов компонентов, как навигационные панели и строки форм. Большинство современных макетов использует оба.