«grid-template-columns» в CSS — это свойство сетки (grid), которое задает ширину колонок внутри сетки. Оно определяет количество и ширину колонок, используемых в grid-раскладке.
Синтаксис свойства «grid-template-columns»:
.grid-container {
display: grid;
grid-template-columns: value1 value2 value3 ...;
}
Значения «value1», «value2», «value3» и т.д. могут быть заданы в разных единицах измерения, таких как «px», «em», «fr» или процентах (%).
Например:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}
В этом примере свойство «grid-template-columns» установит три колонки внутри контейнера сетки. Первая колонка будет иметь ширину 200 пикселей, вторая колонка — равная одному долю пространства, свободного после установки всех фиксированных размеров колонок, и третья — двум долям пространства.
С помощью «grid-template-columns» можно создавать гибкую и адаптивную сетку, которую можно легко настраивать и изменять при изменении размеров экрана различных устройств.