⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Генератор CSS Grid

Проєктуйте CSS Grid макети візуально: задайте стовпці, рядки та проміжок, а потім вписуйте назви областей у клітинки, щоб створити grid-template-areas — з живим попереднім переглядом і кодом CSS та HTML для копіювання.

🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.

Введіть назву в будь-яку клітинку нижче; клітинки з однаковою назвою об'єднуються в одну область grid-template-areas.

Обробка... 0%

Результат

Декларація grid-template-areas — один із найчитабельніших шматків CSS, але лише тоді, коли вона існує — створити її вручну означає рахувати рядки в лапках і вирівнювати довжину рядів, і одна невідповідна клітинка мовчки ламає весь макет. Цей генератор перетворює це на пряме маніпулювання: задайте кількість стовпців і рядків, введіть назву в будь-яку клітинку живої сітки — і збіжні назви автоматично зливаються в одну названу область.

Під капотом кожна клітинка, яку ви залишаєте порожньою, стає крапкою в згенерованому рядку grid-template-areas, а кожна названа клітинка стає частиною прямокутника цієї назви. CSS дозволяє названій області займати лише один чистий прямокутний блок, тому інструмент перевіряє це в міру вашого вводу й повідомляє, коли назва ще не утворює правильного прямокутника — замість того, щоб мовчки видавати CSS, який браузер відхилить.

Column-gap і row-gap типово становлять 8px і об’єднуються в один рядок gap, коли вони збігаються, а попередній перегляд сітки завжди точно відображає ваші доріжки grid-template-columns і grid-template-rows, включно з фіксованими піксельними стовпцями з пресета, як-от бічні смуги 200 пікселів святого грааля. Вихідний код для копіювання охоплює обидві сторони: блок CSS, готовий для вашої таблиці стилів, і відповідний HTML-скелет із одним div grid-area на кожну названу область.

Grid і flexbox вирішують різні завдання верстки, і css-flexbox-generator на цьому сайті є кращою відправною точкою для одновимірних макетів — одного рядка чи стовпця гнучких елементів, як-от панель навігації або стос карток. Звертайтесь до цього генератора сітки тоді, коли вам потрібен двовимірний контроль, явні рядки та стовпці, або названі області на кшталт header/nav/main/footer; ці два інструменти часто опиняються на одній сторінці: grid для оболонки сторінки, а flexbox всередині її частин. Як і кожен інструмент на цьому сайті, він працює повністю у вашому браузері — без завантажень і облікових записів.

Подобається цей інструмент? Думаєте, цей продукт корисний? Бачите в ньому потенціал і хочете підтримати?

🛡️
Виконується в браузері

Ваші файли та дані ніколи не залишають цей пристрій. Обробка відбувається повністю офлайн. 100% безпечно.

Прийняті формати та правила

  • Поля для чисел від 1 до 6 стовпців і рядків, а також окремі регулятори column-gap і row-gap, які об’єднуються в одне значення gap, коли вони збігаються.
  • Режим названих областей: введіть назву області прямо в будь-яку клітинку живої сітки; інструмент створить правильний рядок grid-template-areas та попередить, коли назви не утворюють чистих прямокутників.
  • Блок CSS для копіювання (display: grid, grid-template-columns/rows, gap, grid-template-areas) плюс відповідний HTML-скелет із одним div grid-area на кожну названу область.

Ключові переваги

✓ Введіть назву прямо в будь-яку клітинку, і збіжні назви об’єднуються в одну область grid-template-areas — без виділення перетягуванням і ручного написання рядків у лапках.
✓ Попередній перегляд сітки змінює розміри та кольори при кожній правці, тож ви бачите точні доріжки стовпців і рядків та кожну названу область ще до копіювання жодного рядка CSS.
✓ Пресети, як-от класичний макет «святий грааль» і вузька бічна панель, дають вам готову, робочу декларацію grid-template-areas замість порожньої сітки.

Варіанти використання

  • • Збудуйте класичний макет «святий грааль» — шапка та підвал на всю ширину з середнім рядом nav/main/aside — просто набираючи назви областей замість ручного написання grid-template-areas.
  • • Зверстайте сторінку налаштувань або адміністративну панель із фіксованою бічною панеллю поруч із гнучкою колонкою вмісту та скопіюйте готові CSS і HTML, щойно живий перегляд виглядатиме правильно.
  • • Перевірте, чи набір названих областей насправді утворює правильні прямокутники перед публікацією — інструмент покаже ті назви, які б зламали grid-template-areas у браузері.