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

Макет CSS Grid: 3 однакові колонки

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

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

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

Результат

Ця сторінка відкриває генератор сітки з трьома рівними колонками в один рядок, а іменовані області вимкнені — увесь макет це repeat(3, 1fr), найкоротший спосіб сказати «три колонки, які завжди рівно ділять доступну ширину».

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

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