Реклама мешает? Идти Без рекламы Сегодня 

Генератор CSS Grid (визуальный)

РазработчикТекст

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

Настройки сетки

Колонны

Ряды

Размеры столбцов

Значения, разделенные пробелами (например, 1fr 1fr 1fr, 200px 1fr 2fr)

Размеры строк

Значения, разделенные пробелами (например, auto 1fr auto)

Отступ (px)

Предустановленные макеты

Редактор сетки

Щелкните ячейку, чтобы назначить ей имя области. Ячейки с одинаковыми именами имеют одинаковый цвет.

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

Генератор CSS Grid

Создавайте макеты CSS Grid визуально. Щелкните ячейки, чтобы определить именованные области, настроить размеры столбцов и строк и мгновенно получить готовый к производству CSS-код. Никакого запоминания синтаксиса сетки — просто щелкните и создавайте.

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

Установите количество столбцов и строк, затем щелкните ячейки сетки, чтобы назначить именованные области (например, header, sidebar, main, footer). Ячейки с одинаковыми именами выделяются одинаковым цветом. Вывод CSS обновляется в реальном времени по мере создания макета. Используйте кнопки предустановленных макетов для распространенных макетов, таких как Holy Grail или Dashboard.

Функции

Интерактивный редактор сетки – Щелкните ячейки, чтобы назначить именованные области с автоматической визуализацией цветом
Вывод CSS в реальном времени – Готовый к производству код с grid-template-areas, grid-template-columns, grid-template-rows и gap
Живой просмотр – Просмотр макета с цветными именованными областями в реальном времени
Предустановленные макеты – Макеты Holy Grail, Dashboard, Blog и Portfolio в один клик
Гибкое изменение размеров – Определение размеров столбцов и строк с использованием единиц fr, px или процентов
CSS для дочерних элементов – Автоматическая генерация правил grid-area для каждой именованной области
Клиентская сторона 100% – Вся генерация макета происходит в вашем браузере

РЕКЛАМА · УДАЛЯТЬ?

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

Что такое CSS Grid и чем он отличается от Flexbox?

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

Единица fr (fraction) представляет собой долю доступного пространства в контейнере сетки. 1fr 2fr означает, что второй столбец получает в два раза больше места, чем первый. Это похоже на flex-grow во Flexbox, но специально разработано для треков сетки. Единицы fr автоматически распределяют оставшееся пространство после выделения треков с фиксированным размером (px, em).
Что такое grid-template-areas и зачем использовать именованные области?

grid-template-areas позволяет определять ваш макет с помощью именованных строк, которые визуально представляют структуру сетки в вашем CSS. Вместо размещения элементов по номерам линий (grid-column: 1 / 3), вы назначаете их по имени (grid-area: header). Полученный CSS читается как версия вашего макета в ASCII-арте, что делает его самодокументируемым и более простым в обслуживании.
Что такое макет Holy Grail в веб-дизайне?

Макет Holy Grail — это классическая структура веб-страницы с заголовком, охватывающим всю ширину, трехколоночным телом (левая боковая панель, основной контент, правая боковая панель) и полноширинным нижним колонтитулом. Исторически его было трудно реализовать с помощью CSS floats, и он назывался Holy Grail, потому что чистое его внедрение было таким неуловимым. CSS Grid делает это тривиальным.