grid-template-columns в CSS: как настроить колонки сетки

Свойство grid-template-columns в CSS задает структуру колонок в контейнере Grid: именно оно определяет, сколько вертикальных дорожек получит сетка, какой ширины они будут и как поведут себя при нехватке или избытке пространства. Если объяснить проще, это как разметка полок в шкафу: вы заранее решаете, где будет узкий отсек, где широкий, а где отсеки должны растягиваться автоматически, чтобы все выглядело аккуратно на любом экране.

Что делает grid-template-columns в CSS

grid-template-columns — это свойство CSS Grid Layout, которое задает размеры и количество колонок в сеточном контейнере. Оно работает только у элемента с display: grid или display: inline-grid и устанавливает ширину каждой колонки явно, через шаблон дорожек.

Когда браузер читает это свойство, он создает колоночные треки — вертикальные области, в которые затем распределяются элементы сетки. Значения могут быть фиксированными, гибкими, вычисляемыми, повторяющимися и зависящими от содержимого. Именно поэтому grid-template-columns считается базовым инструментом для построения адаптивных карточек, каталогов, интерфейсных панелей, форм и сложных лендингов.

Если проводить аналогию, Flexbox больше похож на очередь людей у кассы, где элементы подстраиваются по ситуации, а Grid — на размеченную парковку с четко очерченными местами. Свойство grid-template-columns рисует эти места по горизонтали.

Базовый синтаксис

Свойство принимает одно или несколько значений, разделенных пробелом. Каждое значение описывает одну колонку.

.container {
  display: grid;
  grid-template-columns: 200px 300px 1fr;
}

В этом примере создаются 3 колонки:

1. первая — 200px;
2. вторая — 300px;
3. третья — занимает оставшееся пространство через 1fr.

Где начинается и где заканчивается сетка

Сетка по колонкам начинается на первой вертикальной линии grid line 1 и заканчивается на последней линии после последней колонки. Например, если указано 3 колонки, то линий будет 4: стартовая, две промежуточные и конечная.

Как настроить колонки сетки через grid-template-columns

Настроить колонки сетки через grid-template-columns — значит явно описать маршрут распределения ширины между колонками от первой линии до последней. На практике это делается через длины, дробные единицы fr, функции repeat(), minmax(), fit-content() и автоматические значения.

Ниже — конкретный маршрут освоения свойства с четкими “остановками”, чтобы не путаться в конструкции:

1. Старт: задайте контейнеру display: grid.
2. Остановка 1: определите число колонок через список значений.
3. Остановка 2: выберите тип ширины: px, %, fr, auto.
4. Остановка 3: при повторяющейся структуре используйте repeat().
5. Остановка 4: для адаптивности примените minmax().
6. Остановка 5: настройте промежутки через column-gap или gap.
7. Финиш: проверьте поведение на узком и широком экране.

Вот минимальный рабочий пример:

.grid {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 24px;
}

Здесь маршрут колонок такой:

1. первая колонка начинается от линии 1 и заканчивается на линии 2 — ширина 240px;
2. вторая идет от линии 2 до линии 3 — занимает одну долю остатка;
3. третья идет от линии 3 до линии 4 — занимает еще одну долю остатка.

Если ширина контейнера 1200px, а gap между тремя колонками равен 24px, то между колонками два промежутка: 48px суммарно. После вычета 240px и 48px остается 912px. Вторая и третья колонки получат по 456px, потому что 1fr и 1fr делят остаток поровну.

Я советую сначала раскладывать сетку в цифрах на бумаге: ширина контейнера, количество gap, фиксированные колонки, остаток. После этого fr перестает казаться магией и начинает работать предсказуемо.

Какие значения поддерживает свойство grid-template-columns

grid-template-columns поддерживает фиксированные размеры, относительные единицы, гибкие фракции, автоматические значения и специальные функции для повторения и ограничения ширины. Это делает свойство достаточно точным и при этом удобным для адаптивной верстки.

Фиксированные единицы: px, rem, em

Фиксированные колонки удобны там, где размер должен быть строго контролируемым: боковая панель, колонка с иконками, область фильтров.

.layout {
  display: grid;
  grid-template-columns: 280px 720px;
}

Такой шаблон особенно полезен в административных интерфейсах. Но есть важная деталь: слишком много жестких значений делают сетку хрупкой на маленьких экранах.

Проценты

Проценты задают ширину относительно ширины контейнера. Это полезно, если структура должна повторять определенные пропорции.

.layout {
  display: grid;
  grid-template-columns: 30% 70%;
}

Нужно помнить, что gap добавляется сверх этих процентов, из-за чего возможно переполнение.

Единица fr

fr — это дробная единица CSS Grid, которая распределяет свободное пространство между колонками. Она удобнее процентов там, где нужно делить именно остаток, а не весь контейнер.

.cards {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Такой шаблон делит доступный остаток в пропорции 1:2:1. Средняя колонка будет вдвое шире крайних.

Значение auto

auto позволяет колонке учитывать размер содержимого или доступное пространство в зависимости от контекста расчета сетки.

.profile {
  display: grid;
  grid-template-columns: auto 1fr;
}

Этот вариант часто используют для аватара и текста: первая колонка занимает столько, сколько нужно содержимому, вторая — тянется.

repeat()

Функция repeat() сокращает запись повторяющихся колонок. Она уменьшает шанс ошибки и делает код более читаемым.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Это полностью эквивалентно записи 1fr 1fr 1fr 1fr.

minmax()

minmax() задает диапазон ширины колонки: минимальное и максимальное значение. Это один из главных инструментов адаптивных сеток.

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

Каждая колонка не станет уже 220px, но может расширяться до 1fr. Это особенно удобно для карточек товаров.

fit-content()

fit-content() ограничивает колонку по максимальной ширине, но позволяет ей принимать размер по содержимому в разумных пределах.

.table-wrap {
  display: grid;
  grid-template-columns: fit-content(180px) 1fr;
}

Настройка grid-template-columns для адаптивной верстки

Адаптивная настройка grid-template-columns — это способ построить сетку, которая меняет число и ширину колонок в зависимости от доступного пространства. Самый практичный подход — сочетать repeat(), auto-fit или auto-fill и minmax().

Наиболее известный шаблон выглядит так:

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

Что здесь происходит по остановкам:

1. Начало маршрута: контейнер получает display: grid.
2. Остановка “повторение”: repeat() говорит браузеру строить повторяющиеся колонки.
3. Остановка “автоподбор”: auto-fit пытается уместить столько колонок, сколько возможно.
4. Остановка “минимум”: minmax(240px, 1fr) запрещает колонке быть уже 240px.
5. Финиш: если места много, колонки растягиваются; если мало — переносятся на новые строки.

Конкретный пример расчета:

• ширина контейнера: 1040px;
• gap: 24px;
• минимум колонки: 240px.

Проверяем, сколько колонок поместится:

1. 4 колонки потребуют минимум 4 × 240 = 960px;
2. плюс 3 промежутка gap: 3 × 24 = 72px;
3. итого 1032px.

Значит, 4 колонки помещаются. Оставшиеся 8px распределятся между ними через 1fr. Если контейнер станет уже, например 780px, останется уже 3 колонки, потому что для четырех места не хватит.

По данным Web Almanac 2024 от HTTP Archive, CSS Grid широко используется на миллионах страниц, а современные возможности верстки все чаще опираются именно на Grid для двумерных интерфейсов. Это не экспериментальный подход, а стандартная практика современного фронтенда.

Разница между auto-fit и auto-fill

auto-fit схлопывает пустые колонки, а auto-fill сохраняет логику заполнения шаблона, даже если некоторые треки визуально пустуют. На практике auto-fit почти всегда удобнее для карточек.

.fit-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.fill-example {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Практическое наблюдение: разработчики обычно ожидают “живое” растягивание существующих карточек на свободную ширину. Именно поэтому auto-fit в каталогах, блоках услуг и галереях используется чаще, чем auto-fill.

Ошибки при работе с колонками CSS Grid и как их избежать

Типичные ошибки с grid-template-columns связаны с переполнением, неверным пониманием fr и неучтенными промежутками gap. Почти все проблемы решаются точным расчетом остаточного пространства и использованием minmax() вместо жестких размеров.

Ошибка 1: проценты плюс gap ломают ширину

Если задать 50% 50% и добавить gap, контейнер может стать шире доступного пространства.

.bad {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
}

Лучше так:

.good {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

Ошибка 2: слишком маленький min-width у содержимого

Иногда колонка формально рассчитана правильно, но длинный текст, ссылка или изображение не дают ей сжиматься. Тогда кажется, что виноват Grid, хотя причина в min-width содержимого.

.item {
  min-width: 0;
}

Это особенно актуально для карточек с длинными URL, таблиц и code-блоков.

Ошибка 3: жесткая сетка без minmax()

Шаблон вроде repeat(4, 300px) выглядит предсказуемо, но на планшете или маленьком ноутбуке быстро ломает композицию.

Лучший вариант:

.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Ошибка 4: путаница между auto и 1fr

auto опирается на содержимое и алгоритм раскладки, а 1fr делит свободное место как дробь. Это не одно и то же.

Я не рекомендую начинать макет с большого набора фиксированных px-колонок. В реальной работе такой шаблон почти всегда приходится переделывать, когда появляется длинный заголовок, новый фильтр или баннер в боковой панели.

Примеры использования grid-template-columns в реальных макетах

Реальные макеты с grid-template-columns строятся вокруг конкретной структуры интерфейса: каталогов, блогов, дашбордов, форм и карточек. Лучшие результаты дает не абстрактная схема, а шаблон, в котором заранее определены ширины ключевых зон.

Двухколоночный layout: sidebar + content

Конкретная схема:

1. начало — левая колонка фильтров 280px;
2. остановка — gap 32px;
3. завершение — основная колонка контента 1fr.

.page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}

Подходит для страниц каталога, документации, личных кабинетов.

Три колонки для карточек

Фиксированный маршрут для десктопа:

1. первая колонка — 1fr;
2. вторая колонка — 1fr;
3. третья колонка — 1fr;
4. между ними — gap 24px.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Форма с подписями и полями

Здесь удобно использовать узкую колонку для label и широкую для input.

.form-row {
  display: grid;
  grid-template-columns: 180px minmax(280px, 1fr);
  gap: 16px;
  align-items: center;
}

Такой шаблон визуально снижает когнитивную нагрузку: глаз быстро привыкает, что подписи всегда стоят на одной вертикали, а поля — на другой. С точки зрения психологии восприятия интерфейсов это повышает предсказуемость и ускоряет сканирование формы.

Галерея изображений без медиазапросов

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

Это один из самых практичных шаблонов: изображения не ужимаются до нечитаемого состояния и при этом автоматически перестраиваются в нужное число колонок.

Когда лучше использовать grid-template-columns, а когда выбрать другой подход

grid-template-columns лучше использовать, когда нужно управлять именно колонками двумерной сетки, а не просто выстраивать элементы в одну линию. Если задача состоит в распределении элементов только по одной оси, Flexbox обычно проще.

Выбирайте Grid, если нужно:

1. задать несколько колонок с разной логикой ширины;
2. создать карточную сетку;
3. построить layout страницы с sidebar, main и допблоками;
4. совместить контроль над колонками и строками;
5. сделать адаптивный каталог через minmax() и auto-fit.

Выбирайте Flexbox, если нужно:

1. выровнять кнопки в один ряд;
2. распределить элементы навигации по горизонтали;
3. быстро центрировать блок;
4. работать в основном с одной осью.

Если сравнить их не технически, а образно: Flexbox — это резиновый ремень, который тянется вдоль одной линии, а Grid — это шахматная доска, где вы сразу размечаете клетки.

Короткий чек-лист по настройке колонок сетки

Чек-лист по grid-template-columns — это последовательность проверок, которая помогает быстро собрать устойчивую сетку без переполнений и хаотичных переносов. Его удобно использовать перед публикацией или в процессе ревью верстки.

1. Задан ли display: grid у контейнера.
2. Понятно ли, сколько колонок нужно на десктопе.
3. Есть ли фиксированные зоны, например sidebar 240px или 280px.
4. Используется ли 1fr для деления остатка, а не процентов.
5. Учтен ли gap в расчетах.
6. Нужен ли repeat() для сокращения записи.
7. Нужен ли minmax() для адаптивности.
8. Проверено ли поведение длинного текста и изображений.
9. Добавлен ли min-width: 0 там, где контент может переполнять колонку.
10. Проверен ли шаблон на узком экране без горизонтальной прокрутки.

В итоге grid-template-columns — это центральный механизм управления колонками в CSS Grid. Если понимать, как работают px, fr, auto, repeat() и minmax(), можно собирать сетки точно, предсказуемо и без лишних медиазапросов. Самая практичная стратегия проста: фиксируйте только действительно фиксированные зоны, а все остальное отдавайте гибким колонкам через fr и minmax().