Свойство 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,
которое задает количество и ширину столбцов в неявном гриде