😎 » CSS3 » Grid » grid-template-columns
586 0  

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;
}

grid-template

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

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023