Властивість CSS grid-template-columns визначає структуру колонок у сітці та прямо впливає на те, як елементи розподіляються по ширині контейнера. Якщо пояснити просто, це правило працює як план розмітки для полиць у шафі: ви заздалегідь вирішуєте, скільки буде секцій, якої вони ширини та як поводитимуться, коли місця стане більше або менше. Саме тому grid-template-columns у CSS: як налаштувати колонки сітки — одна з базових тем для тих, хто створює адаптивні інтерфейси, картки товарів, галереї, адмінпанелі та складні контентні блоки без зайвих хаотичних відступів.
Що таке grid-template-columns і для чого воно використовується
grid-template-columns — це CSS-властивість, яка задає кількість, порядок і ширину колонок у grid-контейнері. Вона потрібна для того, щоб описати колонкову структуру сітки явно: фіксованими значеннями, гнучкими частками, автоматичним розподілом або через повторювані шаблони.
Працює ця властивість тільки всередині контейнера, для якого задано display: grid або display: inline-grid. Без цього правило не матиме ефекту. Найцінніше в CSS Grid те, що він дозволяє керувати двома вимірами одночасно — колонками та рядками. Якщо Flexbox краще підходить для одноосьових сценаріїв, то Grid дає вищу точність у побудові макету.
За даними сервісу caniuse, підтримка CSS Grid у сучасних браузерах давно стала стабільною, а глобальна доступність цієї технології охоплює переважну більшість реальних користувачів. Це робить підхід не експериментальним, а практичним стандартом для сучасної верстки.
Базовий синтаксис
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}У прикладі створюються три колонки: перша має фіксовану ширину 200px, а дві наступні ділять доступний простір порівну.
Що саме можна задавати
- Фіксовану ширину в px, rem, em, %.
- Гнучку ширину через fr.
- Автоматичні значення через auto.
- Функції repeat(), minmax(), fit-content().
- Імена ліній для точного позиціонування елементів.
Як налаштовувати колонки сітки через grid-template-columns
Налаштування колонок через grid-template-columns — це опис ширини кожної колонки в одному рядку CSS із використанням фіксованих, гнучких або комбінованих значень. На практиці це дає контроль над тим, як блоки заповнюють доступний простір на різних екранах.
Найпростіший спосіб — явно задати кожну колонку вручну.
Фіксовані колонки
.grid {
display: grid;
grid-template-columns: 150px 150px 150px;
gap: 16px;
}Такий варіант корисний там, де структура жорстко визначена: наприклад, у таблицеподібних інтерфейсах, панелях інструментів або блоках з іконками однакового розміру. Але на малих екранах він швидко стає незручним, бо не адаптується до доступної ширини.
Гнучкі колонки через fr
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}Одиниця fr означає частку вільного простору. Тут контейнер ділиться на чотири частини: перша колонка займає одну, друга — дві, третя — одну. Це один із найзручніших механізмів у Grid, бо він дозволяє мислити пропорціями, а не жорсткими пікселями.
Змішаний підхід
.layout {
display: grid;
grid-template-columns: 240px 1fr;
}Класичний кейс: бічна панель має стабільну ширину, а основний контент займає весь інший простір. Саме такий шаблон часто використовується для кабінетів користувача, дашбордів та сторінок налаштувань.
Я часто рекомендую починати не з трьох або чотирьох колонок, а з простого шаблону 240px 1fr. У реальних проєктах це дисциплінує структуру і майже завжди дає кращий результат, ніж занадто деталізована сітка на старті.
Які значення підтримує властивість grid-template-columns
grid-template-columns підтримує фіксовані розміри, відсотки, гнучкі одиниці fr, автоматичні значення та спеціальні функції для адаптивної побудови сітки. Саме комбінація цих типів значень робить Grid потужним інструментом для сучасного UI.
Основні типи значень
| Значення | Що означає | Коли використовувати |
|---|---|---|
| px | Фіксована ширина | Для стабільних елементів інтерфейсу |
| % | Частка від ширини контейнера | Коли ширина має залежати від батьківського блоку |
| fr | Частка вільного простору | Для гнучких адаптивних макетів |
| auto | Ширина за вмістом або доступним простором | Для колонок із непередбачуваним контентом |
| minmax() | Мінімум і максимум ширини | Для контрольованої адаптивності |
| repeat() | Повторюваний шаблон | Щоб не дублювати однакові значення |
| fit-content() | Ширина за вмістом з обмеженням | Для компактних колонок зі стелею росту |
Приклад із repeat()
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}Це еквівалент запису 1fr 1fr 1fr 1fr, але значно читабельніший. Чим чистіший CSS, тим простіше підтримувати проєкт у майбутньому.
Приклад із minmax()
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
}Кожна колонка не стане меншою за 220px, але може розтягуватися до 1fr. Це один із найпрактичніших шаблонів для карток, прев’ю статей і елементів каталогу.
Як зробити адаптивну CSS Grid сітку без зайвих медіазапитів
Адаптивна сітка без великої кількості медіазапитів створюється через поєднання repeat(), minmax() і авто-розрахунку доступної ширини. Такий підхід дозволяє елементам самостійно переноситися на новий рядок, коли місця стає замало.
Найвідоміший патерн виглядає так:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}Тут відбувається одразу кілька важливих речей:
- repeat() повторює шаблон автоматично.
- auto-fit намагається заповнити рядок максимальною кількістю колонок.
- minmax(240px, 1fr) не дозволяє колонці стати меншою за 240px.
У результаті сітка поводиться розумно: на широкому екрані ви бачите більше колонок, на вузькому — менше, але без ламання контенту. Це схоже на валізу з еластичними перегородками: відсіки не зникають, а перебудовуються так, щоб речі не зім’ялися.
Різниця між auto-fit і auto-fill
auto-fit стискає порожні треки, а auto-fill зберігає їх у структурі навіть тоді, коли вони не заповнені контентом. Для більшості інтерфейсів із картками зручнішим буде саме auto-fit.
| Параметр | Поведінка | Типовий сценарій |
|---|---|---|
| auto-fit | Розтягує наявні елементи, забираючи порожній простір | Картки товарів, блог, галереї |
| auto-fill | Зберігає потенційні порожні колонки | Складніші шаблони з передбачуваною структурою |
З практичного досвіду, користувачі краще сприймають інтерфейси, де картки мають стабільну мінімальну ширину. Це пов’язано з базовою когнітивною зручністю: коли блоки надто стискаються, зростає навантаження на зчитування заголовків, кнопок і метаданих.
Як працюють іменовані лінії та складні шаблони колонок
Іменовані лінії — це спосіб дати колонковим межам зрозумілі назви, щоб точніше розміщувати елементи в сітці. Це особливо корисно в складних макетах, де є сайдбар, контентна область, відступи та службові зони.
Приклад з іменованими лініями
.layout {
display: grid;
grid-template-columns: [full-start] 1rem [content-start] 240px 1fr [content-end] 1rem [full-end];
}Після цього елементи можна розміщувати не лише за номерами колонок, а й за назвами ліній. Такий підхід підвищує читабельність коду та спрощує підтримку.
Навіщо це потрібно
- Легше читати великі макети.
- Простіше координувати роботу в команді.
- Менше ризику помилитися з індексом колонки.
- Зручніше змінювати шаблон без переписування логіки компонентів.
Це вже рівень не просто верстки, а архітектури інтерфейсу. Якщо звичайна сітка — це розлінований зошит, то іменовані лінії — це вже креслення з підписаними осями, де менше місця для випадковостей.
Типові помилки під час налаштування колонок сітки
Типові помилки в grid-template-columns — це неправильне поєднання одиниць, відсутність мінімальних обмежень та ігнорування поведінки контенту всередині колонок. Саме ці дрібниці найчастіше ламають адаптивність навіть у візуально простих блоках.
Поширені проблеми
- Надмірне використання px. Жорсткі значення зручні лише в окремих сценаріях.
- Відсутність minmax(). Без мінімуму картки можуть стискатися надто сильно.
- Ігнорування gap. Сітка без нормального проміжку виглядає щільною і гірше читається.
- Плутанина між auto-fill і auto-fit. Результат може не збігатися з очікуванням.
- Неврахований довгий контент. Довгі слова, URL або заголовки можуть розтягувати колонку.
Поганий і кращий приклад
.bad-grid {
display: grid;
grid-template-columns: repeat(4, 300px);
}.good-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}Другий варіант гнучкіший, краще переноситься між пристроями і значно рідше потребує аварійних правок у медіазапитах.
Я не раз бачив, як макет виглядав ідеально в дизайні, але розсипався після додавання реального тексту з CMS. Якщо контент живий, а не тестовий, завжди закладайте межі через minmax() і перевіряйте поведінку довгих заголовків.
Практичні приклади використання grid-template-columns у реальних інтерфейсах
У реальних інтерфейсах grid-template-columns найчастіше застосовують для карток, двоколонкових макетів, галерей, таблицеподібних блоків і складних панелей керування. Нижче — шаблони, які можна брати за основу без зайвого перевантаження.
1. Сітка карток блогу
.posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}Підходить для списків статей, новин, кейсів та категорій.
2. Сторінка з сайдбаром
.page {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
}Класичний макет для фільтрів, навігації або особистого кабінету.
3. Галерея з компактними плитками
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}Добре працює для фотографій, іконок, кейсів, прев’ю робіт.
4. Цінова таблиця
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}Підійде, якщо кількість тарифів фіксована і їх потрібно показати симетрично.
Практичне спостереження
У реальних проєктах найкраще працюють не максимально складні, а передбачувані шаблони. Наприклад, для карток контенту розробники часто зупиняються на мінімальній ширині 240–320px, бо в цьому діапазоні зазвичай комфортно розміщуються заголовок, зображення, короткий опис і кнопка дії без ламання ритму. Це не абстрактна теорія, а повторюваний патерн, який добре показує себе в інтернет-магазинах, медіа та корпоративних сайтах.
Коли краще обрати Grid, а коли Flexbox для колонкової структури
Grid краще підходить для двовимірних макетів із контрольованими колонками, а Flexbox — для простого розташування елементів в одному напрямку. Якщо вам потрібно саме налаштувати колонки сітки, а не просто вирівняти ряд елементів, перевага зазвичай на боці Grid.
| Інструмент | Найкраще підходить для | Обмеження |
|---|---|---|
| Grid | Складних макетів, колонок і рядків, карток, дашбордів | Може бути надлишковим для простих лінійних блоків |
| Flexbox | Меню, кнопок, вирівнювання в ряд або колонку | Менше контролю над двома вимірами одночасно |
Хороше правило таке:
- Якщо потрібно керувати тільки одним напрямком — спершу дивіться на Flexbox.
- Якщо потрібні колонки, рядки та чітка схема розкладки — використовуйте Grid.
- У великих інтерфейсах ці підходи часто поєднують.
Як оптимізувати читабельність і підтримку CSS сітки в командній роботі
Підтримувана CSS-сітка — це сітка з передбачуваними назвами, повторюваними патернами та мінімумом магічних чисел. Для командної розробки це важливо не менше, ніж сама візуальна коректність.
Корисні правила
- Використовуйте repeat() замість дублювання однакових значень.
- Задавайте gap централізовано через змінні або дизайн-токени.
- Віддавайте перевагу minmax() у карточних інтерфейсах.
- Іменуйте класи за призначенням, а не за виглядом.
- Тестуйте макет на реальному контенті, а не тільки на коротких заглушках.
Приклад охайного підходу
:root {
--gap-md: 24px;
--card-min: 260px;
}
.catalog {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
gap: var(--gap-md);
}Такий код легше масштабувати. Якщо дизайн зміниться, вам не доведеться шукати десятки окремих значень по всьому проєкту.
Висновок
grid-template-columns — це ключова властивість CSS Grid, яка задає логіку колонок і допомагає будувати як прості, так і складні адаптивні макети. Вона підтримує фіксовані значення, одиниці fr, відсотки, auto, а також потужні функції на кшталт repeat() і minmax(). Для реальних інтерфейсів найпрактичнішими зазвичай стають шаблони на зразок repeat(auto-fit, minmax(…)), бо вони поєднують контроль і гнучкість без перевантаження медіазапитами. Якщо ви хочете не просто “розкласти блоки”, а створити стійку, читабельну й адаптивну структуру, правильне налаштування колонок сітки через grid-template-columns дає саме той рівень точності, який потрібен сучасній верстці.