Генератор CSS Grid
Визуальное построение CSS-сеток.
Предустановки макета (10)
Проведите по ячейкам, чтобы закрасить прямоугольник, или щёлкайте по одной ячейке. Каждая именованная область должна оставаться прямоугольной.
Живой предпросмотр
Одномерный: Генератор CSS Flexbox.
Создать CSS-сетку с именованными областями
Нарисуйте сетку букв для областей шаблона или выберите предустановку. Предпросмотр показывает каждую область отдельным оттенком.
Вопросы и ответы
Что такое grid-template-areas?
Способ именовать области макета (header, sidebar, main…) и размещать элементы по имени, а не по номерам линий. Нажимайте ячейки ниже, чтобы закрашивать их буквами областей — CSS обновляется в реальном времени.
Можно ли начать с пресета?
Да — десять пресетов макета, включая Holy grail, dashboard, magazine и app shell, загружают именованные области в один клик.
Что-либо загружается?
Нет. CSS полностью создаётся в вашем браузере.
Последнее обновление: