Свойство grid-template-columns

Описание

Определяет колонки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

Синтаксис

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;
Значение Описание
none Ключевое слово, означающее, что явная сетка макета не создается. Любые столбцы будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-columns. Является значением по умолчанию.
length / percentage Задает размер столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
flex Неотрицательное значение в 'гибких' единицах измерения fr (fractional unit). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr, столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.

Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.

Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc() (функция выполняет математические расчеты для определения значений свойств).
max-content Ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.
min-content Ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце.
minmax(min, max) Функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max. Если max меньше min, то max игнорируется, а функция обрабатывается как min. Значение в 'гибких' единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.
auto Размер столбцов определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content, а как минимум, представляет самый большой минимальный размер. Автоматические размеры столбцов допускается растягивать с помощью свойств align-content и justify-content.
fit-content( length | percentage ) Представляет собой формулу min(max-content, max(auto, argument)), которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content)), за исключением того, что размер столбца зажимается значением argument, если он больше, чем автоматический минимум.
repeat( [ positive-integer | auto-fill | auto-fit ] , track-list ) Представляет из себя повторяющийся фрагмент списка столбцов (дорожек), позволяя записать в более компактной форме большое количество столбцов с повторяющимся шаблоном.
Возможные значения:

- positive-integer - положительное целое число, которое определяет количество повторений.
- auto-fill - если контейнер сетки имеет определенный или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не вызывает переполнения сетки. Если любое количество повторений будет вызывать переполнение контейнера, то количество повторений будет равно 1. В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, число повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз. Другими словами auto-fill заполняет строку любым количеством столбцов. Таким образом, он создает неявные столбцы всякий раз, когда новый столбец может поместиться, потому что он пытается заполнить строку как можно большим количеством столбцов. Добавленные столбцы могут быть пустыми, но они все равно будут занимать определенное место в строке.
- auto-fit - ведет себя так же, как auto-fill, за исключением того, что после размещения элементов сетки пустые повторяющиеся дорожки объединяются (это может привести к тому, что все дорожки будут объеденены, если все они пусты). Другими словами auto-fit помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными столбцами (как при автоматическом заполнении), а затем сворачивает пустые.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .grid-container {
 display: grid;
 grid-template-columns: 30px 200px auto 100px;
 grid-gap: 10px;
 background-color: #2196f3;
 padding: 10px;
 }
 .grid-container > div {
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
 padding: 20px 0;
 color: black;
 font-size: 30px;
 }
 </style>
 <div class='grid-container'>
 <div class='item1'>1</div>
 <div class='item2'>2</div>
 <div class='item3'>3</div>
 <div class='item4'>4</div>
 <div class='item5'>5</div>
 <div class='item6'>6</div>
 <div class='item7'>7</div>
 <div class='item8'>8</div>
 </div>
</body>
</html>
1
2
3
4
5
6
7
8

Читайте также

Свойство all

Универсальное свойство, сбрасывает все значения свойств в исходные значения, исключением является...

Свойство margin-bottom

Устанавливает величину отступа от нижней границы текущего элемента до внутренней границы его роди...

Свойство padding-top

Устанавливает расстояние от внутреннего верхнего края рамки элемента до воображаемого прямоугольн...

Свойство flex-basis

Определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width ...

Свойство page-break-after

Добавляет разрыв страницы при печати документа после заданного элемента.