Свойство grid-area устанавливает размер и положение грид-элемента в строке. Это сокращенная форма для следующих свойств:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
Свойство grid-area может также установить название для грид-элемента. Свойство grid-template-areas грид-контейнера может содержать ссылку на именованные элементы.
Значение по умолчанию | auto / auto / auto / auto |
Применяется | К грид-элементам. |
Наследуется | Нет |
Анимируемое | Да. Грид-область анимируема. |
Версия | CSS Grid Layout Module Level 1 |
DOM синтаксис | object.style.gridArea = "1 / 2 / span 2 / span 3"; |
Синтаксис
grid-area: grid-row-start | grid-column-start | grid-row-end | grid-column-end | itemname | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: left; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'left main main main right right'
'left footer footer footer footer footer';
grid-gap: 5px;
background-color: #555;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Пример свойства grid-area</h2>
<p>Можете использовать свойство grid-area для наименования грид-элементов.</p>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Left</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>
Название box1 - "itemname". Блок занимает место пяти колонок:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.box1 {
grid-area: itemname;
}
.grid-container {
display: grid;
grid-template-areas: 'itemname itemname itemname itemname itemname';
grid-gap: 5px;
background-color: #8ebf42;
padding: 5px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Пример свойства grid-area</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Значения
Значение | Описание |
---|---|
grid-row-start | Определяет, в какой строке должен отображаться элемент. |
grid-column-start | Определяет, в какой колонке должен отображаться элемент. |
grid-row-end | Определяет, на какой линии строки должен закончиться элемент или сколько строк должен занять. |
grid-column-end | Определяет, на какой линии колонки должен закончиться элемент или сколько колонок должен занять. |
itemname | Устанавливает название элемента. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
57.0+ | 16.0+ | 52.0+ | 10.1+ | 44.0+ |
Практикуйте свои знания
Что такое CSS свойство grid-area?
Правильный!
Неправильно!