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

CSS свойства

Определение и применение

CSS свойство grid-template определяет количество, наименование и ширину столбцов и строк в макете сетки, задает шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area. Является сокращенным свойством для следующих свойств:

Схематичное отображение работы свойства grid-template отображено на следующем изображении:

Схематичное отображение работы свойства grid-template

Поддержка браузерами

СвойствоChrome
Chrome		Firefox
Firefox		Opera
Opera		Safari
Safari		Internet Explorer
IExplorer		Microsoft Edge
Edge
grid-template 54.0*52.044.010.310.0*
-ms-		16.0
12.0
-ms-

Синтаксис:

CSS синтаксис:

grid-template: "none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-areas grid-template-rows | grid-template-areas grid-template-rows / grid-template-columns | initial | inherit"

grid-template-rows: "none | length | percentage | flex | min-content | max-content | auto | minmax() | fit-content() | repeat() | initial | inherit";
grid-template-columns: "none | length | percentage | flex | min-content | max-content | auto | minmax() | fit-content() | repeat() | initial | inherit";
grid-template-areas: "none | . | itemnames";

/* допустимые значения в процентах */
grid-template: 50% / 25%;
grid-template: 25% 25% / 25% 25%;

/* допустимые значения в гибких единицах измерения */
grid-template: 0.5fr 1fr / 1fr 1fr;
grid-template: 3fr 1fr / 1fr 3fr;

/* допустимые значения используя ключевые слова */
grid-template: auto / auto;
grid-template: none / none;
grid-template: min-content / min-content;
grid-template: max-content / max-content;

/* функциональные нотации  minmax(), fit-content() и repeat() */
grid-template: minmax(100px, 1fr) / minmax(100px, 1fr);
grid-template: fit-content(60px) / fit-content(50%);
grid-template: repeat(4, 200px) / repeat(4, 25%);
grid-template: [row1] 100px [row2] 200px / [col1] auto [col2] 1fr;

/* с указанием имен областей элементов */
grid-template: "a a a" /* только имена областей */
                             "b b b"; 
grid-template: "a a a" 20% /* имена областей и значения для строк */
                             "b b b" auto;
grid-template: "a a a" 40px /* имена областей, значения для строк и через косую черту значения для столбцов */
                             "b c c" 40px
                             "b c c" 40px / 1fr 2fr 1fr;
grid-template: [header-start] "a a a" 30px [header-end] /* имена областей, наименование и значения для строк и через косую черту для столбцов */
                             [main-start] "b b b" 30px [main-end]
                             / [col1] auto [col2] 1fr [col3] auto;

JavaScript синтаксис:

object.style.gridTemplate="25% 25% / 20px 20px"

Значения свойства

ЗначениеОписание
grid-template-rowsОпределяет количество, наименование и размер строк в макете сетки. Возможные значения:
  • none - ключевое слово, означающее, что явная сетка макета не создается. Любые строки будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-rows. Является значением по умолчанию.
  • length / percentage - задает размер строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
  • flex - неотрицательное значение в "гибких" единицах измерения fr (fractional unit). Каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr, строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
    Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер строк сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
    Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc()css3 (функция выполняет математические расчеты для определения значений свойств).
  • max-content - ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в столбце.
  • min-content - ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в столбце.
  • minmax(min, max) - функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max. Если max меньше min, то max игнорируется, а функция обрабатывается как min. Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.
  • auto - размер строк определяется размером контейнера и размером содержимого элементов в строке. Как максимум, идентичен значению max-content, а как минимум, представляет самый большой минимальный размер. Автоматические размеры строк допускается растягивать с помощью свойств align-contentcss3 и justify-contentcss3.
  • 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 помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными строками (как при автоматическом заполнении), а затем сворачивает пустые.
grid-template-columnsОпределяет количество, наименование и размер столбцов (дорожек) в макете сетки. Возможные значения:
  • none - ключевое слово, означающее, что явная сетка макета не создается. Любые столбцы будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-columns. Является значением по умолчанию.
  • length / percentage - Задает размер столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
  • flex - Неотрицательное значение в "гибких" единицах измерения fr (fractional unit). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr, столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
    Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
    Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc()css3 (функция выполняет математические расчеты для определения значений свойств).
  • max-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.
  • min-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце
  • minmax(min, max) - функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max. Если max меньше min, то max игнорируется, а функция обрабатывается как min. Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.
  • auto - размер столбцов определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content, а как минимум, представляет самый большой минимальный размер. Автоматические размеры столбцов допускается растягивать с помощью свойств align-contentcss3 и justify-contentcss3.
  • 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 помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными столбцами (как при автоматическом заполнении), а затем сворачивает пустые.
grid-template-areas Определяет шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area. Возможные значения:
  • none - контейнер не определяет именованные области макета сетки. Значение по умолчанию.
  • . - точка означает пустую ячейку сетки макета.
  • itemnames - строка создается для каждой отдельной строки в списке, а столбец - для каждой ячейки в строке. Несколько маркеров именованных ячеек внутри строк и между строками создают одну именованную область сетки, которая охватывает соответствующие ячейки сетки. Каждая строка с областями должна быть помещена в кавычки. Если заданные ячейки не образуют прямоугольник, то объявление является недопустимым.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

Кандидат в рекомендации (Candidate Recommendation)

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства grid-template</title>
<style> 
.grid-container,
.grid-container2 {
	display: grid;  /* элемент отображается как блочный   grid-контейнер */
	margin-top: 5px;  /* внешний отступ сверху */
	padding: 10px;  /* внешний отступ элемента со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
}
.grid-container > div,
.grid-container2 > div { 
	background: rgb(241,101,41);  /* цвет заднего фона */
	border: 1px solid #000;  /* сплошная граница размером 1 пиксель черного цвета */
	text-align: center;  /* горизонтальное выравнивание текста */
} 
.grid-container {
	grid-template: [row1] 1fr [row2] 2fr [row3] 3fr / [col1] 25% [col2] 25% [col3] 25%;  /* определяем количество, наименование и ширину строк и столбцов в макете сетки */
}
.grid-container2 {
	grid-template: 60px 40px 20px /  1fr 2fr 1fr;  /* определяем количество и ширину строк и столбцов в макете сетки */
}
</style>
</head>
	<body>
		<div class = "grid-container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
			<div>F</div>
			<div>G</div>
			<div>H</div>
		</div>
		<div class = "grid-container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
			<div>F</div>
			<div>G</div>
			<div>H</div>
		</div>
	</body>
</html>

В этом примере мы разместили два блочных grid-контейнера, внутри которых мы разместили по восемь элементов <div>.

Для первого контейнера с помощью свойства grid-template мы указываем три значения, которые определяют, что мы размещаем в макете сетки три строки, используя допустимое значение длины в "гибких" единицах измерения fr (fractional unit). В этом случае каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Через косую черту мы указываем три значения, которые определяют, что мы размещаем три столбца (дорожки), используя допустимое процентное значение, которое в зависимости от размера контейнера определяет размер столбца в процентном соотношении. Кроме того, для каждого столбца и строки мы указали свое имя, которое поместили в квадратные скобки.

Для второго контейнера с помощью свойства grid-template мы указываем три значения, которые определяют, что мы размещаем в макете сетки три строки, используя допустимое значение в пикселях. Через косую черту мы указываем три значения в "гибких" единицах измерения fr (fractional unit). В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

Результат примера:

Пример использования свойства grid-template.
Пример использования свойства grid-template

В следующем примере мы рассмотрим использование свойства grid-template в котором зададим шаблон макета сетки, ссылаясь при этом на имена областей элементов:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства grid-template (с указанием имен областей)</title>
<style> 
.grid-container {
	display: grid;  /* элемент отображается как блочный   grid-контейнер */
	margin-top: 5px;  /* внешний отступ сверху */
	padding: 10px;  /* внешний отступ элемента со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	grid-template: 'header header header header' 50px /* определяем шаблон макета сетки, ссылаясь при этом на имена областей элементов */
                                     'nav main main .' 75px  /* точка обозначает элемент без имени */
                                     'nav main main .' 75px /* точка обозначает элемент без имени */
                                     'footer footer footer footer' 50px / 1fr 1fr 1fr 1fr; 
}
.grid-container > div { 
	background: rgb(241,101,41);  /* цвет заднего фона */
	border: 1px solid #000;  /* сплошная граница размером 1 пиксель черного цвета */
	text-align: center;  /* горизонтальное выравнивание текста */
} 
.item-a {
	grid-area: header;  /* задаем имя элемента */
	background: red !important;  /* цвет заднего фона */
}
.item-b {
  grid-area: main;  /* задаем имя элемента */
	background: yellow !important;  /* цвет заднего фона */
}
.item-c {
  grid-area: footer;  /* задаем имя элемента */
	background: green !important;  /* цвет заднего фона */
}
.item-d {
  grid-area: nav;  /* задаем имя элемента */
	background: violet !important;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "grid-container">
			<div class = "item-a">Header</div>
			<div class = "item-b">Main</div>
			<div class = "item-c">Footer</div>
			<div class = "item-d">Navigation</div>
		</div>
	</body>
</html>

В этом примере мы разместили один блочный grid-контейнер, внутри которого мы разместили четыре элемента <div>. Для элементов с классом item-a, item-b, item-c и item-d с помощью свойства grid-area задаем собственное имя элемента.

После этого с помощью свойства grid-template определяем шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые мы создали с помощью свойства grid-area:

Обратите внимание на то, что при описании шаблона с помощью свойства grid-template мы каждую строку с областями помещаем в кавычки.

Результат примера:

Пример использования свойства grid-template (с указанием имен областей).
Пример использования свойства grid-template (с указанием имен областей).
CSS свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?