grid-template-columns

Пример

Три колонки: боковые по 10rem, средняя забирает остальное место:

<div class="grid">
  <div>Левая</div>
  <div>Центр</div>
  <div>Правая</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 10rem 1fr 10rem;
  gap: 0.5rem;
}

.grid div {
  padding: 0.5rem;
  border: 1px solid;
}

Синтаксис

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?;

Начальное значение

none

Применяется к

грид-контейнерам

Наследуется

нет

Анимируется

по каждому треку, если списки одинаковой длины; иначе дискретно

Вычисляемое значение

как указано, длины — в абсолютных единицах

Каждое значение в списке — одна колонка. Между ними можно дать имена линиям в квадратных скобках: [full-start] 1fr [content-start] 40rem [content-end] 1fr [full-end].

Значения

none

Явных колонок нет, сетка создаёт их автоматически по grid-auto-columns. Значение по умолчанию.

Длина или процент

Колонка фиксированной ширины: 200px, 20rem, 25%.

fr

Доля свободного места. 1fr 2fr — вторая колонка вдвое шире первой.

auto

Ширина по содержимому, а если осталось место — растягивается.

min-content, max-content, fit-content(…)

Ширина по содержимому: по самому длинному слову, по всему тексту без переносов или по тексту, но не шире указанного предела.

minmax(min, max)

Колонка не уже min и не шире max.

repeat(n, …)

Повторяет колонки: repeat(4, 1fr) — четыре равные колонки.

repeat(auto-fill, …) и repeat(auto-fit, …)

Столько колонок, сколько поместится. auto-fit схлопывает пустые колонки, и занятые растягиваются на всю ширину.

subgrid

Колонки берутся из родительской сетки — вложенные элементы выравниваются по общим линиям.

Как понять

Сетка — это таблица без таблицы. Вы описываете колонки контейнера, а элементы сами раскладываются по ячейкам слева направо и сверху вниз. Единица fr делит то, что осталось после фиксированных колонок и промежутков, поэтому 200px 1fr и 1fr 1fr не требуют никакой арифметики с процентами.

repeat(auto-fit, minmax(12rem, 1fr)) — почти волшебная формула: колонки не уже 12rem, их число подстраивается под ширину контейнера, а оставшееся место делится поровну. Адаптивная сетка без единого медиазапроса.

Примеры

Адаптивная галерея

Поменяйте ширину окна — число колонок изменится само:

<ul class="gallery">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.gallery li {
  padding: 1.5rem;
  text-align: center;
  background: #eef;
}

Макет страницы

Центральная колонка ограничена по ширине, по краям — поля, которые сужаются на маленьком экране:

<article class="page">
  <p>Текст статьи в колонке не шире 30rem.</p>
</article>

.page {
  display: grid;
  grid-template-columns: 1fr min(30rem, 100% - 2rem) 1fr;
}

.page > * {
  grid-column: 2;
  outline: 1px dashed;
}

Подсказки

• Колонка 1fr может стать шире положенного, если внутри длинное слово или широкая картинка: минимальный размер fr — содержимое. Помогает minmax(0, 1fr).
• auto-fill оставляет пустые колонки, если элементов мало; auto-fit отдаёт их место занятым колонкам. Для галерей обычно нужен auto-fit.
• Строки задаются так же свойством grid-template-rows, а колонки, строки и именованные области вместе — сокращением grid-template.
• В инструментах разработчика у грид-контейнера есть значок grid: он показывает линии сетки поверх страницы.