Макет CSS Grid із 3 рівних стовпців
Проєктуйте CSS Grid макети візуально: задайте стовпці, рядки та проміжок, а потім вписуйте назви областей у клітинки, щоб створити grid-template-areas — з живим попереднім переглядом і кодом CSS та HTML для копіювання.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор сітки з трьома стовпцями однакової ширини в одному рядку, з вимкненими названими областями — макет це просто repeat(3, 1fr), найкоротший спосіб сказати «три стовпці, які завжди рівномірно ділять доступну ширину».
Стовпці однакової ширини — це робоча конячка сіток карток, таблиць цін і галерей зображень: жодну область не треба називати, бо кожен стовпець виконує однакову роль, тож просте визначення доріжок є зрозумілішим, ніж декларація grid-template-areas. Додайте рядок — і ті самі три доріжки повторюються під ним, залишаючись ідеально рівними.
Збільшіть кількість стовпців для щільнішої сітки або ввімкніть названі області, якщо пізніше якийсь стовпець має вирізнятися — CSS і HTML нижче оновляться тієї ж миті. Усе працює на стороні клієнта, тому нічого не треба завантажувати й нічого чекати.