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

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

При указании в свойствах значений в пикселях размеры столбцов будут точно им соотвествовать. Если мы задаем слово `auto`, то столбцы будут заполнять все доступное пространство. Использование единицы `fr` (фракция) означает, что все пространство будет разбито на одинаковые доли. Преимуществом `fr` является его адаптивность к разным контейнерам или разрешениям экрана, поскольку `fr` просто расделяет их на указанное количество фракций без привязки к точному размеру в пикселях.

## Синтаксис

`селектор { grid-template-columns: ширина столбца; }`

## Пример

Давайте зададим ширину столбцов для наших элементов в гриде:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 50px 100px 200px 50px; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Давайте укажем первому и третьему столбцам фиксированную ширину в пикселях, а второй столбец пусть автоматически заполнит доступное пространство:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 100px auto 150px; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

А теперь с помощью свойства `grid-template-columns` сделаем так, чтобы первый и второй столбцы заняли одну часть контейнера, а третий столбец - три части:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 1fr 3fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Значения, указанные в единицах `fr` могут принимать дробный вид. Давайте изменим предудыщий пример, указав для второго и третьего столбца ширину в дробных числах:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 0.5fr 2.5fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Давайте в свойстве `grid-template-columns` укажем функцию `repeat()`, которая сообщит контейнеру, что все три столбца должны иметь одинаковую ширину:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

А теперь давайте изменим предыдущий пример так, чтобы к трем одинаковым столбцам добавился четвертый, который займет две фракции контейнера:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(3, 1fr) 2fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Давайте зададим первым двум столбцам ширину в одну фракцию контейнера, а последним двум столбцам - в две фракции:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(2, 1fr) repeat(2, 2fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

А теперь давайте установим ширину столбцам скомбинировав значения, указанные с помощью функции `repeat()` и свободных единиц `fr`:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Также в функции `repeat()` можно указывать значение `auto-fill`, которое заполнит наш контейнер одинаковыми столбцами нужной нам ширины:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fill, 200px); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Очень удобно вместе с `auto-fill` указывать функцию `minmax`, которая задает диапазон ширины столбцов от минимального до максимального значения. Если ширина контейнера не вмещает все столбцы, то их некоторые из них переместятся на новую строку, при этом столбцы в строке равномерно распределятся в ней. Давайте изменим предыдущий пример, указав в нем функцию `minmax`. Для того, чтобы увидеть разные варианты размещения столбцов изменяйте ширину страницы своего браузера:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Теперь давайте укажем свойство `auto-fit`, отличие которого от `auto-fill` заключается в том, что оно подгоняет количество столбцов под доступную ширину контейнера, расширяя или сжимая их:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 50% 1fr 2fr 30%; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Давайте используем вместе свойства `grid-template-columns` и `grid-template-rows`:

`<div id="parent"> <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>9</div> </div>` `#parent { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Давайте с помощью свойств `grid-template-columns` и `grid-template-rows` создадим таблицу из девяти ячеек, расположенных в три ряда. Причем второй и третий ряд будут иметь одинаковую ширину, а каждый столбец - различную ширину:

`<div id="parent"> <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>9</div> </div>` `#parent { display: grid; grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

А теперь в таблице из предыдущего примера сделаем верхний ряд шириной в две фракции, а первый столбец - в половину фракции:

`<div id="parent"> <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>9</div> </div>` `#parent { display: grid; grid-template-rows: 2fr 1fr 1fr; grid-template-columns: 0.5fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Смотрите также

- свойство `grid-template-rows`,
  которое задает количество и ширину рядов в гриде
- свойство `grid-auto-columns`,
  которое задает количество и ширину столбцов в неявном гриде

← →
↑
en ru