Клавиша / esc

grid-template-columns

Задаём количество и размер грид-колонок.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

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

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

        
        
          
        
      

Как понять

Скопировано

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

Как пишется

Скопировано

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

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

        
        
          
        
      

Подсказки

Скопировано

💡 Можно использовать функцию 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];
}

        
        
          
        
      
Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline