grid-template-rows

Свойство, задающее размеры и количество рядов грид-раскладки.

Внутри блока .container будет создано 3 ряда:

        
          
          .container {  display: grid;  grid-template-rows: 250px 5vw 15rem;}
          .container {
  display: grid;
  grid-template-rows: 250px 5vw 15rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство grid-template-rows командует браузеру, во сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.

В качестве значения указывается то количество размеров, какое количество рядов необходимо. Размеры могут указываться в любых доступных единицах измерения. Размеры перечисляются через пробел.

        
          
          .container {  display: grid;  grid-template-rows: 5px 50px 40% 14rem 8em 1fr;}
          .container {
  display: grid;
  grid-template-rows: 5px 50px 40% 14rem 8em 1fr;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Специальное значение subgrid позволяет дочернему грид-контейнеру наследовать ряды родителя вместо создания собственных. Ряды дочернего элемента будут совпадать с рядами родительского грида.

        
          
          .parent {  display: grid;  grid-template-rows: auto 1fr auto;}.child {  display: grid;  grid-row: span 3;  grid-template-rows: subgrid;}
          .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.child {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Это позволяет выровнять содержимое вложенных элементов (например, шапку, тело и подвал карточек) по общим рядам родительского грида.

💡 Можно использовать функцию repeat() для создания рядов одного размера.

💡 Удобно использовать единицу измерения fr, чтобы указать, в каких соотношениях ряды разделят свободное место.

💡 Кроме непосредственного количества рядов и их размеров можно задавать и имена для грид-линий, ограничивающих эти ряды:

        
          
          .container {  display: grid;  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];}
          .container {
  display: grid;
  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать