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

Пример

Создайте контейнер сетки с 4 столбцами:

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }

Числа в таблице указывают номер первой версии браузера, поддерживающей это свойство.

Свойство
grid-template-columns	57	16	52	10	44

Свойство grid-template-columns используется для установки количества столбцов и их ширины в макете сетки.

Значение по умолчанию:	auto
Наследуется:	нет
animation:	Поддерживается.Подробнее обanimatable Попробуйте сами
версия:	Модуль CSS Grid Layout Уровень 1
Синтаксис JavaScript:	object.style.gridTemplateColumns="50px 50px 50px" Попробуйте сами

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Значение	Описание
none	Значение по умолчанию; размер столбца не указан.
auto	Размер столбцов определяется размером контейнера и размером содержимого grid-элементов в столбцах.
max-content	Размер каждого столбца устанавливается равным размеру самого большого grid-элемента в этом столбце.
min-content	Размер каждого столбца устанавливается равным размеру самого маленького grid-элемента в этом столбце.
length	Значение длины, которое может быть числом в px или процентным значением %. 0 — значение по умолчанию. Узнать больше.Единицы длины。
initial	Устанавливает это свойство в значение по умолчанию.Подробнее об initial
inherit	Наследует это свойство от родительского элемента. Подробнее о inherit

Создайте grid-контейнер с 4 столбцами и задайте размер для каждого столбца.

.grid-container { display: grid; grid-template-columns: 30px 200px auto 100px; }

Учебник CSS:CSS Grid Layout

Справочник по CSS:grid-areaСвойство

Справочник CSS:grid-template-rowsСвойство

Справочник CSS:grid-template-columnsСвойство

Справочник CSS:grid-template-areasСвойство

Другие расширения