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

CSS свойства

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

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

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

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

Для позиционирования элемента в строках grid-контейнера вы можете воспользоваться свойствами:

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

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

Синтаксис:

CSS синтаксис:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;;

// возможные значения
grid-column-start: "auto | line | line-name | span line | initial | inherit";
grid-column-end: "auto | line | line-name | span line | initial | inherit";
grid-row-start: "auto | line | line-name | span line | initial | inherit";
grid-row-end: "auto | line | line-name | span line | initial | inherit";
itemname: произвольное имя элемента // значение указывается без кавычек !!!

// с указанием одного значения
grid-area: grid-row-start;
grid-area: itemname;;

// с указанием двух значений
grid-area: grid-row-start / grid-column-start;

// с указанием трех значений
grid-area: grid-row-start / grid-column-start / grid-row-end;

// с указанием четырех значений
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

/* используя ключевое слово auto */
grid-area: auto; 
grid-area: auto / auto; 
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto; /* значение по умолчанию */

/* позиция элемента указывается в соответствии с начальной и конечной гранью элемента */
grid-area: 1;
grid-area: 1 / 5;
grid-area: 1 / 5 / 3;
grid-area: 1 / 5 / 3 / 7;

/* позиция элемента указывается в соответствии с заданным именем столбца */
grid-area: line-name;
grid-area: line-name / line-name;
grid-area: line-name / line-name / line-name;
grid-area: line-name / line-name / line-name / line-name;

/* используя ключевое слово span */
grid-area: span 2;
grid-area: 1 / span2;
grid-area: span 2 / 5;
grid-area: line-name / span2;
grid-area: 1 / 1 / span2;
grid-area: 2 / 2 / auto / span 3;
grid-area: 1 / 2 / span 3 / span 3;

JavaScript синтаксис:

object.style.gridArea="auto / auto / auto / auto"

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

ЗначениеОписание
grid-row-startОпределяет сколько строк будет занимать элемент, или на какой строке начинается элемент в макете сетки. Возможные значения:
  • auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1). Является значением по умолчанию.
  • line - целое число, которое соответствует начальной грани элемента в макете сетки (отсчет граней в макете ведется сверху вниз от верхнего края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.
  • line-name - строковое значение ссылающееся на именованную строку в макете сетки. Элемент располагается от начальной грани указанного элемента.
  • span line - ключевое слово span с целым числом, которое определяет какое количество строк сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1. Отрицательные значения или значение 0 недопустимы.
grid-row-endОпределяет сколько строк будет занимать элемент, или на какой строке заканчивается элемент в макете сетки. Возможные значения:
  • auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1). Является значением по умолчанию.
  • line - целое число, которое соответствует конечной грани элемента в макете сетки (отсчет граней в макете ведется сверху вниз от верхнего края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.
  • line-name - строковое значение ссылающееся на именованную строку в макете сетки. Элемент располагается до начальной грани указанного элемента.
  • span line - ключевое слово span с целым числом, которое определяет какое количество строк сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1. Отрицательные значения или значение 0 недопустимы.
grid-column-startОпределяет с какого столбца будет расположен элемент в макете сетки, или какое количество столбцов будет охватывать элемент. Возможные значения:
  • auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1). Является значением по умолчанию.
  • line - целое число, которое соответствует начальной грани элемента в макете сетки (отсчет граней ведется слева направо от левого края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.
  • line-name - строковое значение ссылающееся на именованный столбец в макете сетки. Элемент располагается от начальной грани указанного элемента.
  • span line - ключевое слово span с целым числом, которое определяет какое количество столбцов сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1. Отрицательные значения или значение 0 недопустимы.
grid-column-endОпределяет сколько столбцов будет занимать элемент, или на какой строке столбца завершится элемент. Возможные значения:
  • auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1). Является значением по умолчанию.
  • line - целое число, которое соответствует конечной грани элемента в макете сетки (отсчет граней в макете ведется слева направо от левого края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.
  • line-name - строковое значение ссылающееся на именованный столбец в макете сетки. Элемент располагается до начальной грани указанного элемента.
  • span line - ключевое слово span с целым числом, которое определяет какое количество столбцов сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1. Отрицательные значения или значение 0 недопустимы.
itemnameЗадает имя элемента сетки.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

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

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства grid-area</title>
<style> 
.grid-container,
.grid-container2 {
	display: grid;  /* элемент отображается как блочный   grid-контейнер */
	margin-top: 5px;  /* внешний отступ сверху */
	padding: 10px;  /* внешний отступ элемента со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	grid-template-rows: [row1] 30px  [row2] 30px  [row3] 30px  [row4] 30px;  /* определяем количество, наименование и ширину строк в макете сетки */
	grid-template-columns: [column1] 25%  [column2] 25%  [column3] 25%  [column4] 25%;  /* определяем количество, наименование и ширину столбцов в макете сетки */
}
.grid-container > div,
.grid-container2 > div { 
	background: rgb(241,101,41);  /* цвет заднего фона */
	border: 1px solid #000;  /* сплошная граница размером 1 пиксель черного цвета */
	text-align: center;  /* горизонтальное выравнивание текста */
} 
.item-a {
	grid-area: 1 / 3 / 5;  /* определяем с какой строки и стобца начинается элемент и какой строкой заканчивается  */
	background: red !important;  /* цвет заднего фона */
}
.item-b {
	grid-area: row2 / span 4 / row4;  /* определяем с какой строки будет начинатсья элемент, сколько столбцов будет охватывать и какой строкой заканчивается элемент */
	background: yellow !important;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "grid-container">
			<div class = "item-a">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 class = "item-b">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-columns мы указываем четыре значения, которые определяют, что мы размещаем четыре столбца (дорожки), используя допустимое значение в процентах. С помощью свойства grid-template-rows мы указываем четыре значения, которые определяют, что мы размещаем четыре строки, используя допустимое значение в пикселях. Кроме того, для каждого столбца и строки мы задаем уникальное имя.

Для элемента с классом item-a, расположенного в первом контейнере с помощью свойства grid-area определяем, что элемент будет распологаться в макете сетки с первой строки (целое число 1 соответствует начальной грани элемента (отсчет граней в макете ведется сверху вниз от верхнего края элемента), с третьего столбца (целое число 2 соответствует начальной грани элемента в макете сетки), а заканчиваться элемент будет четвертой строкой (целое число 5 соответствует конечной грани элемента (отсчет граней в макете ведется сверху вниз от верхнего края элемента).

Для элемента с классом item-b, расположенного во втором контейнере с помощью свойства grid-area определяем, что элемент будет распологаться в макете сетки в строке с именем row2 (элемент располагается от начальной грани указанного элемента), элемент будет охватывать четыре столбца, а заканчиваться элемент будет строкой с именем row4 (элемент располагается до начальной грани указанного элемента).

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

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

В следующем примере мы рассмотрим с Вами как правильно указывать четыре значения для свойства grid-area:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства grid-area (четыре значения)</title>
<style> 
.grid-container,
.grid-container2 {
	display: grid;  /* элемент отображается как блочный   grid-контейнер */
	margin-top: 5px;  /* внешний отступ сверху */
	padding: 10px;  /* внешний отступ элемента со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	grid-template-rows: [row1] 30px  [row2] 30px  [row3] 30px  [row4] 30px;  /* определяем количество, наименование и ширину строк в макете сетки */
	grid-template-columns: [column1] 25%  [column2] 25%  [column3] 25%  [column4] 25%;  /* определяем количество, наименование и ширину столбцов в макете сетки */
}
.grid-container > div,
.grid-container2 > div { 
	background: rgb(241,101,41);  /* цвет заднего фона */
	border: 1px solid #000;  /* сплошная граница размером 1 пиксель черного цвета */
	text-align: center;  /* горизонтальное выравнивание текста */
} 
.item-a {
	grid-area: 1 / 1 / 5 / column3;  /* определяем с какой строки и стобца начинается элемент и какой строкой и столбцом заканчивается  */
	background: red !important;  /* цвет заднего фона */
}
.item-b {
	grid-area: row1 / 2 / row4 / span 3;  /* определяем с какой строки и стобца начинается элемент и какой строкой и столбцом заканчивается */
	background: yellow !important;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "grid-container">
			<div class = "item-a">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 class = "item-b">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-columns мы указываем четыре значения, которые определяют, что мы размещаем четыре столбца (дорожки), используя допустимое значение в процентах. С помощью свойства grid-template-rows мы указываем четыре значения, которые определяют, что мы размещаем четыре строки, используя допустимое значение в пикселях. Кроме того, для каждого столбца и строки мы задаем уникальное имя.

Для элемента с классом item-a, расположенного в первом контейнере с помощью свойства grid-area определяем, что элемент будет распологаться в макете сетки:

Для элемента с классом item-b, расположенного во втором контейнере с помощью свойства grid-area определяем, что элемент будет распологаться в макете сетки:

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

Пример использования свойства grid-area (четыре значения).
Пример использования свойства grid-area (четыре значения).

В следующем примере мы рассмотрим как с помощью свойства grid-area задавать имя элемента сетки.

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойств grid-area и grid-template-areas</title>
<style> 
.grid-container {
	display: grid;  /* элемент отображается как блочный   grid-контейнер */
	margin-top: 5px;  /* внешний отступ сверху */
	padding: 10px;  /* внешний отступ элемента со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	grid-template-rows: 30px 30px 30px 30px;  /* определяем количество и ширину строк в макете сетки */
	grid-template-columns: 25% 25% 25% 25%;  /* определяем количество и ширину столбцов в макете сетки */
	grid-template-areas: 'header header header header'  /* определяем шаблон макета сетки, ссылаясь при этом на имена областей элементов */
                                                  'nav main main .'  /* точка обозначает элемент без имени */
                                                  'nav main main .'  /* точка обозначает элемент без имени */
                                                  'footer footer footer footer'; 
}
.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>. С помощью свойства grid-template-columns мы указываем четыре значения, которые определяют, что мы размещаем четыре столбца (дорожки), используя допустимое значение в процентах. С помощью свойства grid-template-rows мы указываем четыре значения, которые определяют, что мы размещаем четыре строки, используя допустимое значение в пикселях.

Для элементов с классом item-a, item-b, item-c и item-d с помощью свойства grid-area задаем собственное имя элемента.

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

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

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

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