Генератор CSS Grid

Loading CSS Grid Editor...

Что такое CSS Grid?

CSS Grid Layout — самая мощная система макетов в CSS. Это двумерная система, способная работать со столбцами и строками, в отличие от flexbox, который является преимущественно одномерным.

Как использовать этот генератор CSS Grid

1

Задать размеры сетки

Используйте боковую панель для определения столбцов, строк и отступов.

2

Определить области

Кликните и перетащите на превью для выбора прямоугольных областей.

3

Настроить единицы

Настройте размеры столбцов и строк через поля ввода.

4

Попробовать шаблон

Выберите готовый макет: Holy Grail, Blog или Dashboard.

5

Сгенерировать код

Нажмите «Сгенерировать код» для экспорта CSS и HTML.

css grid

Руководство по синтаксису CSS Grid

Основа CSS Grid включает такие свойства, как grid-template-columns (ширина столбцов), grid-template-rows (высота строк) и grid-gap (отступы). Использование дробных единиц (fr) позволяет создавать гибкие макеты, адаптирующиеся к размеру экрана.

Примеры макетов CSS Grid

Популярные примеры — макет 'Святой Грааль' (шапка, сайдбар, основной контент, подвал). С помощью grid-template-areas вы можете называть эти области, что делает CSS-код более понятным и удобным для поддержки.

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

Что такое CSS Grid?
CSS Grid — двумерная система макетов для веба, позволяющая создавать сложные адаптивные макеты со строками и столбцами.
Как использовать генератор?
Задайте столбцы и строки, настройте отступы, затем кликните и перетащите. Нажмите «Сгенерировать код».
Какие единицы можно использовать?
CSS Grid поддерживает fr, px, %, auto, min-content, max-content и функции minmax().
Что такое grid-template-areas?
Свойство CSS для определения именованных областей сетки с помощью ASCII-art синтаксиса.
Можно ли экспортировать макет?
Да! Нажмите «Сгенерировать код», чтобы увидеть макет в виде CSS и HTML.
Инструмент бесплатный?
Да, генератор полностью бесплатен. Регистрация не требуется.