Как работает свойство grid-template-rows в CSS Grid?

Свойство grid-template-rows в CSS Grid определяет количество, наименование и размер строк в макете сетки. basicweb.ru

Свойство указывается в элементе-родителе и определяет ширину рядов элементов-потомков. code.mu

Некоторые варианты работы свойства:

• Указание значений в пикселях. code.mu Размеры рядов будут точно им соответствовать. code.mu
• Использование слова auto. code.mu Ряды будут заполнять всё доступное пространство. code.mu
• Применение единицы fr (фракция). code.mu Всё пространство будет разбито на одинаковые доли. code.mu Преимуществом fr является его адаптивность к разным контейнерам или разрешениям экрана. code.mu
• Использование функции minmax. code.mu Она задаёт диапазон ширины рядов от минимального до максимального значения. code.mu Если ширина контейнера не вмещает все ряды, то некоторые из них переместятся на новую строку, при этом ряды в строке равномерно распределятся в ней. code.mu

По умолчанию свойство имеет значение none, что означает, что явная сетка макета не создаётся, а любые строки будут генерироваться неявно, их размер будет определяться с помощью свойства grid-auto-rows. basicweb.ru hcdev.ru