Свойство CSS grid-template-columns
Используйте свойство CSS grid-template-columns для определения размера и ширины столбцов. Примеры значений этого свойства.
Свойство grid-template-columns определяет количество столбцов в раскладке CSS Grid и ширину (размер дорожки) каждого из них. Оно задаётся на grid-контейнере — элементе с display: grid — и каждое значение в списке создаёт одну явную дорожку столбца.
На этой странице рассматриваются ключевые слова и функции для определения размеров дорожек (fr, repeat(), minmax(), auto, fit-content()), когда какую из них использовать и типичные ошибки, с которыми сталкиваются разработчики. Аналог для строк — grid-template-rows; для одновременного задания столбцов и строк используйте grid-template.
| Начальное значение | none |
|---|---|
| Применяется к | Grid-контейнерам. |
| Наследуется | Нет. |
| Анимируется | Да. Столбцы поддерживают анимацию. |
| Версия | CSS Grid Layout Module Level 1 |
| DOM-синтаксис | object.style.gridTemplateColumns = "40px 40px 40px"; |
Синтаксис
CSS grid-template-columns
grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;Пример свойства grid-template-columns:
CSS grid-template-columns пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
background-color: #ccc;
padding: 10px;
margin-top: 20px;
}
.example > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Здесь 1fr 1fr 1fr 1fr создаёт четыре столбца одинаковой ширины. Единица fr («доля») делит оставшееся пространство контейнера после вычета промежутков, поэтому четыре дорожки всегда остаются равными независимо от ширины экрана. Восемь элементов переносятся на две неявные строки, поскольку задано только четыре столбца.
Результат
Пример применения grid-template-columns к grid-контейнеру:
CSS grid-template-columns пример с длинами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 40px 150px auto 80px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Сочетание фиксированных и гибких дорожек — наиболее распространённый паттерн на практике. В примере выше первый столбец ровно 40px, второй 150px, четвёртый 80px, а третий (auto) занимает всё оставшееся пространство.
Ключевые слова и функции для определения размеров дорожек
Перечислять каждый столбец вручную приходится редко. Следующие ключевые слова и функции делают значение компактным и адаптивным.
repeat() — избавляет от повторений
repeat(count, size) разворачивается в count дорожек заданного размера. grid-template-columns: repeat(4, 1fr) эквивалентно 1fr 1fr 1fr 1fr. В сочетании с auto-fill/auto-fit размещает столько дорожек, сколько позволяет контейнер — основа адаптивных карточных сеток:
/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));minmax() — задаёт минимум и максимум
minmax(min, max) позволяет дорожке расти и сжиматься в заданных пределах. minmax(200px, 1fr) никогда не станет уже 200px, но растягивается, чтобы занять свободное пространство. Используйте её, чтобы столбцы не схлопывались на маленьких экранах.
fr — делит оставшееся пространство
Единица fr распределяет пространство, оставшееся после фиксированных размеров и промежутков. 2fr 1fr делает первый столбец вдвое шире второго. В отличие от процентов, fr уже учитывает промежутки, поэтому столбцы не выходят за пределы контейнера.
auto, max-content, min-content, fit-content()
auto подгоняет дорожку под содержимое, но позволяет ей растягиваться; max-content делает её такой широкой, как самый длинный неразрывный контент; min-content сжимает до минимально допустимой ширины содержимого; fit-content(300px) ведёт себя как auto, но не превышает заданный максимум.
Попробуйте вместе
<!DOCTYPE html>
<html>
<head>
<title>grid-template-columns with repeat and minmax</title>
<style>
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.cards > div {
background-color: #6b9b37;
color: #fff;
text-align: center;
padding: 30px 0;
font-size: 24px;
}
</style>
</head>
<body>
<h2>Responsive columns</h2>
<div class="cards">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Измените размер окна предварительного просмотра: количество столбцов изменится автоматически, а каждая карточка останется шириной не менее 120px.
Значения
| Значение | Описание | Пример |
|---|---|---|
| none | Значение по умолчанию для данного свойства. | Пример » |
| auto | Размер дорожки определяется содержимым, но может увеличиваться, занимая доступное пространство. | Пример » |
| max-content | Размер каждого столбца зависит от наибольшего элемента в нём. | Пример » |
| min-content | Размер каждого столбца зависит от наименьшего элемента в нём. | Пример » |
| minmax(min, max) | Диапазон размера: не менее «min» и не более «max». | Пример » |
<length> | Размер столбцов задаётся в единицах длины. | Пример » |
<percentage> | Размер столбцов задаётся в процентах. | Пример » |
<flex> | Неотрицательное значение с единицей «fr», задающее коэффициент гибкости дорожки. Каждая дорожка <flex>-размера занимает оставшееся пространство пропорционально своему коэффициенту. | Пример » |
| fit-content | Представляет min(max-content, max(auto, argument)), аналогично auto (то есть minmax(auto, max-content)), но размер превышает минимум auto. | Пример » |
| repeat | Представляет повторяющийся фрагмент списка дорожек, позволяя записывать большое число столбцов с повторяющимся шаблоном в компактной форме. | Пример » |
| initial | Устанавливает для свойства значение по умолчанию. | Пример » |
| inherit | Наследует значение свойства от родительского элемента. | Пример » |
Связанные свойства
grid-template-rows— то же самое для горизонтальных дорожек (строк).grid-template-areas— именование областей сетки и размещение элементов по именам.grid-template— сокращённое свойство, задающее строки, столбцы и области одновременно.grid-auto-columns— определяет размеры неявных столбцов, создаваемых за пределами явного шаблона.grid— полное сокращённое свойство для всего определения сетки.