G Один набор инструментов для
любой задачи проектирования

Генератор CSS Grid

Визуально создавайте макеты CSS Grid с предварительным просмотром в реальном времени.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

G Генератор CSS Grid

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

Генератор CSS Grid позволяет визуально создавать макеты CSS Grid без написания кода. Используйте ползунки, чтобы установить количество столбцов и строк, отрегулировать промежуток между ячейками и мгновенно скопировать полный код CSS для вставки в свой проект.

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

Pro Tips

Frequently Asked Questions

Q: В чем разница между CSS Grid и Flexbox?
В чем разница между CSS Grid и Flexbox? Сетка предназначена для двумерных макетов (строки И столбцы). Flexbox предназначен для одномерных макетов (строка ИЛИ столбец). Используйте Grid для структуры страницы, Flexbox для выравнивания компонентов.
Q: Как сделать сетку адаптивной?
Как сделать сетку адаптивной? Используйте сгенерированный CSS в качестве отправной точки и добавьте запросы @media, чтобы изменить количество столбцов в разных точках останова.
Q: Могу ли я использовать CSS Grid в производстве?
Могу ли я использовать CSS Grid в производстве? Да. CSS Grid поддерживается во всех современных браузерах с 2017 года. Он поддерживается 96% браузеров по всему миру.
Q: Что означает 1фр?
Что означает 1фр? fr означает дробь. 1fr означает одну долю доступного пространства. Если у вас есть три столбца, для каждого из которых установлено значение 1fr, они делят пространство поровну.
Q: Могу ли я вкладывать сетки внутрь сеток?
Могу ли я вкладывать сетки внутрь сеток? Да, элементы сетки сами могут стать контейнерами сетки. Создайте сетку главной страницы, а затем используйте вложенные сетки для отдельных разделов, таких как боковая панель или область контента.

Русские традиционные цвета

От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.

Алый #FF2400

Алый цвет знамён, сарафанов и праздничной символики

Васильковый #6495ED

Цвет полевых васильков — символ русских лугов

Золото Хохломы #D4AF37

Золотой орнамент хохломской росписи

Гжель Синий #005A9C

Кобальтовая синева гжельской керамики

Изумрудный #50C878

Цвет уральских самоцветов и малахита

Бордовый #800020

Тёмно-красный цвет театральных занавесов

Янтарный #FFBF00

Балтийский янтарь — золото Калининграда

Сиреневый #C8A2C8

Нежная сирень майских садов

Охристый #CC7722

Цвет иконописи и древних фресок

Снежно-белый #F8F8FF

Белый снег русских зим

Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.