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

Макет CSS Grid: сайдбар + контент

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

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

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

Результат

Ця сторінка відкриває генератор сітки з уже названим двоколонковим макетом в один рядок: колонка сайдбара 200px поруч із гнучкою колонкою контенту, що займає весь залишок простору. Обидві області одразу видно в живому прев'ю, розфарбовані й підписані, тож поділ зрозумілий з першого погляду.

Це найпоширеніша форма «навігація плюс контент» у вебі — сторінки налаштувань, документація й адмін-панелі спираються саме на бічну панель фіксованої ширини поряд із гнучкою основною областю. Оскільки колонка сайдбара задана в пікселях, а колонка контенту — через 1fr, сайдбар лишається сталої ширини, а контент забирає кожен зайвий піксель вʼюпорту.

Перейменуйте будь-яку область, змініть ширину колонки або додайте ще рядків для шапки над розділенням — код 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 у браузері.