Свойство grid-template-rows в CSS Grid определяет количество, наименование и размер строк в макете сетки. 1
Свойство указывается в элементе-родителе и определяет ширину рядов элементов-потомков. 5
Некоторые варианты работы свойства:
- Указание значений в пикселях. 5 Размеры рядов будут точно им соответствовать. 5
- Использование слова auto. 5 Ряды будут заполнять всё доступное пространство. 5
- Применение единицы fr (фракция). 5 Всё пространство будет разбито на одинаковые доли. 5 Преимуществом fr является его адаптивность к разным контейнерам или разрешениям экрана. 5
- Использование функции minmax. 5 Она задаёт диапазон ширины рядов от минимального до максимального значения. 5 Если ширина контейнера не вмещает все ряды, то некоторые из них переместятся на новую строку, при этом ряды в строке равномерно распределятся в ней. 5
По умолчанию свойство имеет значение none, что означает, что явная сетка макета не создаётся, а любые строки будут генерироваться неявно, их размер будет определяться с помощью свойства grid-auto-rows. 12