Кратко
Секция статьи "Кратко"Свойство, задающее размеры и количество колонок грид-раскладки.
Пример
Секция статьи "Пример"Внутри блока .container
будет создано 3 колонки:
.container { display: grid; grid-template-columns: 40px auto 40%;}
.container { display: grid; grid-template-columns: 40px auto 40%; }
Как понять
Секция статьи "Как понять"Свойство grid
командует браузеру, во сколько колонок выстраивать вложенные элементы. И какого размера должны быть колонки.
Как пишется
Секция статьи "Как пишется"В качестве значения указывается то количество размеров, какое количество колонок необходимо. Размеры могут указываться в любых доступных единицах измерения. Размеры перечисляются через пробел.
.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]; }