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