grid-template-columns

С помощью grid-template-columns задают, сколько колонок будет в грид-раскладке и какого они размера.

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

        
          
          .container {  display: grid;  grid-template-columns: 40px auto 40%;}
          .container {
  display: grid;
  grid-template-columns: 40px auto 40%;
}

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

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

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

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

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

        
          
          .parent {  display: grid;  grid-template-columns: 1fr 2fr 1fr;}.child {  display: grid;  grid-column: span 3;  grid-template-columns: subgrid;}
          .parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

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

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

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

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

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

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

        
          
          .container {  display: grid;  grid-template-columns: [start] 140px [line2] 250px [line3] 40px [end];}
          .container {
  display: grid;
  grid-template-columns: [start] 140px [line2] 250px [line3] 40px [end];
}

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