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

Класичний макет CSS Grid «Holy Grail»

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

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

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

Результат

Ця сторінка відкриває генератор сітки з уже готовим макетом «holy grail»: три колонки й три рядки, де шапка і підвал розтягнуті на всю ширину, а між ними — рядок nav/main/aside. Рядок шапки має автовисоту, середній рядок займає весь залишок простору, а дві бічні колонки зафіксовані на 200px, поки колонка main забирає решту.

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

Кожне число і відступ на цій сторінці й далі живі: звузьте бічні колонки, додайте четвертий рядок або перейменуйте область — прев'ю та код CSS для копіювання оновляться миттєво. Скопіюйте блоки CSS і HTML прямо у ваш проєкт — усе працює локально у вашому браузері, нічого не завантажується на сервер.

🛡️
Локальна безпека (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 у браузері.