Справочник HTML & CSS

grid-template-columns

Количество и ширина колонок сетки.

Синтаксис

grid-template-columns: size size …;

Значения

Параметр	Тип	Описание
fr	fraction	Доля свободного места: `1fr 2fr`.
px, %	length	Фиксированная или процентная ширина.
repeat()	function	Повторяет колонки: `repeat(3, 1fr)`.
minmax()	function	Ширина между минимумом и максимумом.

Примеры

Одна фиксированная колонка и две гибкие:

<style>
  .grid { display: grid; grid-template-columns: 100px 1fr 2fr; gap: 6px; }
  .grid div { padding: 8px; background: lightskyblue; }
</style>
 
<div class="grid"><div>100px</div><div>1fr</div><div>2fr</div></div>

Адаптивная сетка без медиазапросов — столько колонок, сколько поместится:

<style>
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .cards div { padding: 12px; background: palegreen; }
</style>
 
<div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>

Примечания

repeat(auto-fill, minmax(…, 1fr)) — одна из самых полезных строк в CSS: число колонок само подстраивается под ширину.

См. также

grid-template-rows — Количество и высота рядов сетки.
gap — Промежутки между элементами во flexbox и grid.
repeat() — Повторяет дорожки сетки, чтобы не выписывать их по одной.
minmax() — Размер дорожки сетки между минимумом и максимумом.
subgrid — Значение `grid-template-columns` и `grid-template-rows`, с которым вложенная сетка использует дорожки родительской сетки.

Вопросы и ответы по теме

В учебнике

Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.

Спасибо, что читаете!