Свойство grid-template-rows - количество и ширина рядов в гриде
Свойство grid-template-rows задает
количество и ширину рядов, которые
будет занимать элемент в гриде или сетке.
В значении свойства указываем ширину рядов
в любых единицах
для размеров.
Свойство указывается в элементе-родителе
и определяет ширину рядов элементов-потомков.
При указании в свойствах значений в пикселях
размеры рядов будут точно им соотвествовать.
Если мы задаем слово auto, то ряды будут
заполнять все доступное пространство. Использование
единицы fr (фракция) означает,
что все пространство будет разбито
на одинаковые доли. Преимуществом
fr является его адаптивность к
разным контейнерам или разрешениям экрана,
поскольку fr просто расделяет их на указанное
количество фракций без привязки к точному размеру в пикселях.
Синтаксис
селектор {
grid-template-rows: ширина ряда;
}
Пример
Давайте зададим ширину рядов для наших элементов в гриде:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 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-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А теперь с помощью свойства
grid-template-rows
сделаем так, чтобы первый и второй
ряды заняли одну часть контейнера,
а третий ряд - три части:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
Давайте в свойстве grid-template-rows
укажем функцию repeat(),
которая сообщит контейнеру, что все
три ряда должны иметь одинаковую ширину:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#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-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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-rows: repeat(auto-fill, minmax(50px, 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-rows: repeat(auto-fit, minmax(100px, 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-rows: 50% 1fr 2fr 30%;
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: 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-columns,
которое задает количество и ширину столбцов в гриде -
свойство
grid-auto-rows,
которое задает количество и ширину рядов в неявном гриде