Свойство CSS grid-template-columns

Свойство grid-template-columns определяет размер (ширину) каждого столбца в макете сетки:

Начальное значение	none
Применяется к	Контейнеры сетки.
Наследуется	Нет.
Анимация	Да. Столбцы можно анимировать.
Версия	CSS Grid Layout Module Level 1
DOM-синтаксис	object.style.gridTemplateColumns = "40px 40px 40px";

Синтаксис

CSS grid-template-columns

css

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

html

<!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>

Try it Yourself »

Результат

Длина CSS grid-template-columns

Пример применения grid-template-columns к grid-container:

Пример длины CSS grid-template-columns

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Play it
none	Это значение по умолчанию для свойства.	Play it »
auto	Размер трека определяется его содержимым, но может увеличиваться, чтобы заполнить доступное пространство.	Play it »
max-content	Размер каждого столбца зависит от самого большого элемента в столбце.	Play it »
min-content	Размер каждого столбца зависит от самого маленького элемента в столбце.	Play it »
minmax(min, max)	Диапазон размеров больше или равен «min» и меньше или равен «max».	Play it »
`<length>`	Размер столбцов указывается в единицах длины.	Play it »
`<percentage>`	Размер столбцов указывается в процентах.	Play it »
`<flex>`	Безразмерное значение с единицей «fr», указывающее коэффициент гибкости трека. Каждый трек размером `<flex>` делит оставшееся пространство пропорционально своему коэффициенту гибкости.	Play it »
fit-content	Представляет собой min(max-content, max(auto, аргумент)), что аналогично auto (т. е. minmax(auto, max-content)), но размер больше минимального значения auto.	Play it »
repeat	Представляет собой повторяющийся фрагмент списка треков, позволяющий записать большое количество столбцов с повторяющимся паттерном в более компактной форме.	Play it »
initial	Заставляет свойство использовать значение по умолчанию.	Play it »
inherit	Наследует свойство от родительского элемента.	Play it »

Практика

Какова функция свойства 'grid-template-columns' в CSS?

Оно определяет количество строк в макете сетки.Оно используется для указания имен линий и функций размера треков столбцов сетки.Оно помогает выравнивать текст внутри макета сетки.Оно устанавливает ширину и количество столбцов в макете сетки.Оно используется для стилизации цвета фона сетки.

Свойство CSS grid-template-columns ​

Синтаксис ​

Пример свойства grid-template-columns: ​

Результат ​

Пример применения grid-template-columns к grid-container: ​

Значения ​