grid-template-columns
grid-template-columns и grid-template-rows - определяет столбцы и строки сетки с разделенным пробелами списком значений. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.
1. Когда вы оставляете пустое пространство между значениями дорожки, линиям сетки автоматически присваиваются положительные и отрицательные числа:
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
2. Но вы можете явно указать имена строк. Обратите внимание на синтаксис скобок для имен строк:
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
3. Если ваше определение содержит повторяющиеся части, вы можете использовать нотацию repeat () для упрощения:
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
Что эквивалентно этому:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
4. Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени и количеству строк.
.item {
grid-column-start: col-start 2;
}
5. Единица fr позволяет вам установить размер дорожки как часть свободного пространства контейнера сетки. Например, для каждого элемента будет задана треть ширины контейнера сетки:
.container {grid-template-columns: 1fr 1fr 1fr;}
Свободное пространство рассчитывается после любых негибких предметов. В этом примере общий объем свободного пространства, доступного для подразделений fr, не включает 50px:
.container {grid-template-columns: 1fr 50px 1fr 1fr;}
Возможные варианты написания:
/* Keyword value */
grid-template-columns: none;
/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
repeat(auto-fit, [linename3 linename4] 300px)
100px;
grid-template-columns: [linename1 linename2] 100px
repeat(auto-fit, [linename1] 300px) [linename3];
/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;
---
Информация на mdn