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

Генератор CSS Grid

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

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

Опрацювання... 0%

Результат

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

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

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

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

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Числові поля для 1–6 колонок і рядків, окремі керування відступом колонок і рядків, що об'єднуються в один gap, коли значення збігаються.
  • Режим іменованих областей: впишіть назву області прямо в будь-яку клітинку живої сітки — інструмент збирає коректний рядок grid-template-areas і попереджає, коли назви не утворюють чисті прямокутники.
  • Готовий до копіювання блок CSS (display: grid, grid-template-columns/rows, gap, grid-template-areas) та відповідний скелет HTML з одним div grid-area на кожну іменовану область.

Наші переваги

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

Сценарії використання

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