CSS grid-area — область елемента в ґріді
Властивість grid-area - це універсальна властивість, для скороченого запису:
grid-row-start(задає першу горизонтальну лінію для елемента)grid-column-start(задає першу вертикальну лінію для елемента)*grid-row-end(задає останню горизонтальну лінію для елемента)grid-column-end(задає останню вертикальну лінію для елемента)
Цими властивостями ми визначаємо область, в яку буде поміщений елемент. Вони дозволяють вказати, де рядок починається на сітці та скільки клітинок він охоплює. Для цього використовуються номери ліній. Початкове значення цих властивостей - auto, завдяки чому елементи можуть розміщуватися автоматично, відшукуючи у сітці порожні клітинки.
За допомогою grid-area, ми можемо записати всі ці чотири властивості одночасно. Наприклад:
.box {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end 4;
}
А можна записати так:
.box {
grid-area: 2 / 2 / 4 / 4;
}
Записуємо саме в цій послідовності: grid-row-start / grid-column-start / grid-row-end / grid-column-end. Риска (/) відділяє значення для кожної під-властивості.
Також властивість grid-area можна використовувати, щоб дати елементу ім'я, щоб на нього міг посилатися шаблон, створений за допомогою властивості grid-template-areas:
/* тут визначаємо імена */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* посилаємося на імена з сітки */
.box .item:first-child {
grid-area: e / e / i / i;
}
Неявні іменовані лінії
Ви також можете посилатися на будь-які неявні (і явні) названі лінії, які були визначені в сітці.
Неявні названі рядки створюються автоматично, коли ви створюєте іменовану сітку. Тому, коли ви створюєте імена для елементів сітки (як у попередньому прикладі), за цим сценарієм створюється цілий набір імпліцитних (невиражених) названих рядків.
Для кожної названої сіткової області з ім'ям, наприклад foo створюються чотири імпліцитно названі рядки. Два імені, що називаються foo-start, називаються рядками початку рядка і стовпця та двома імені foo-end називаються рядками кінці рядка і стовпця.
Отже, ми можемо взяти приклад вище і додати -start для обох значень e і -end до обох i значень, і матимемо імпліцитні названі рядки:
/* тут визначаємо імена */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* посилаємося на неявні іменовані рядки */
.box .item:first-child {
grid-area: e-start / e-start / i-end / i-end;
}
Отже, ми фактично не визначали e-start або i-end в будь-якому місці коду. Вони були автоматично створені з наших названих областей сітки. Якщо б ми назвали ці області, скажімо, one і two, наші неявні названі рядки будуть називатися one-start і two-end.
Явні іменовані рядки
CSS також дозволяє вказати власні імена для ліній сітки. Вони називаються явними названими рядками. Ви можете створювати ці імена, коли ви визначаєте клітинки, а потім звертаєтесь до них, як з неявними названими рядками:
/* визначаємо рідки й імена ліній */
grid-template-columns: 1fr [col2-start] 1fr 1fr [col3-end];
grid-template-rows: 1fr [row2-start] 1fr 1fr [row3-end] 1fr;
/* посилаємося на іменовані рядки */
#grid >` div:first-child {
grid-area: row2-start / col2-start / row3-end / col3-end;
}
Ключове слово span
Ключове слово span може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька клітин.
Ось результат використання span:
Загальний опис
автор: NagarD
Синтаксис
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;Властивість grid-area може отримувати 2 значень:
-
<name> -
Ім'я для елемента сітки.
автор: Svitlana -
<row-start> / <column-start> / <row-end> / <column-end> -
Значення для під-властивостей
автор: Svitlanagrid-row-start,grid-column-start,grid-row-end,grid-column-endвідповідно.
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridArea |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Універсальна властивість
HTML
<div class="box">
<div class="item">grid-area: 2 / 2 / 4 / 4;</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
font-family: monospace;
}
.box .item {
background-color: #999;
color: #222;
text-align: center;
font-weight: 700;
font-size: 1.75em;
padding: 16px;
}
.box .item:first-child {
grid-area: 2 / 2 / 4 / 4;
background-color: orange;
line-height: 84px;
}Числовий запис: ряд-початок / колонка-початок / ряд-кінець / колонка-кінець. Синій блок починається з другої колонкової лінії і тягнеться до шостої — чотири колонки завширшки.
HTML
<div class="grid">
<div class="box">1 / 2 / 2 / 6</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>CSS
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.grid div {
background: #eee;
padding: 8px;
}
.box {
grid-area: 1 / 2 / 2 / 6;
background: #0172ad;
color: #fff;
}Іменований запис: блок стає в область header, накреслену в grid-template-areas контейнера.
HTML
<div class="layout">
<div class="box">header</div>
<div class="nav">nav</div>
<div class="main">main</div>
</div>CSS
.layout {
display: grid;
grid-template-areas:
"header header"
"nav main";
gap: 4px;
}
.layout div {
background: #eee;
padding: 8px;
}
.box {
grid-area: header;
background: #0172ad;
color: #fff;
}
.nav { grid-area: nav; }
.main { grid-area: main; }Динамічний приклад роботи властивості
HTML
<p>Пропиши нове значення для властивості <strong>grid-area</strong>:</p>
<div class="controls">
<span>grid-row-start:</span>
<select id="gridRowStart" class="grid-row">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="-1">-1</option>
</select>;<br>
<span>grid-column-start:</span>
<select id="gridColumnStart" class="grid-column">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="-1">-1</option>
</select>;<br>
<span>grid-row-end:</span>
<select id="gridRowEnd" class="grid-row">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="-1">-1</option>
<option value="span 1">span 1</option>
<option value="span 2">span 2</option>
<option value="span 3">span 3</option>
</select>;<br>
<span>grid-column-end:</span>
<select id="gridColumnEnd" class="grid-column">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="-1">-1</option>
<option value="span 1">span 1</option>
<option value="span 2">span 2</option>
<option value="span 3" selected>span 3</option>
<option value="span 4">span 4</option>
<option value="span 5">span 5</option>
</select>;
</div>
<div class="box">
<div class="item" id="block"></div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>CSS
body {
font-family: monospace;
font-size: 18px;
line-height: 1.45;
}
.controls {
line-height: 2;
margin-bottom: 36px;
background-color: #f7f7f7;
padding: 16px;
}
.controls span {
display: inline-block;
width: 50%;
font-weight: 700;
color: #333;
}
.controls select {
background-color: #555;
color: white;
border: none;
font-size: 1em;
padding: 2px;
}
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 1px;
font-family: monospace;
}
.box .item {
background-color: rgba(0, 0, 0, .45);
color: #222;
text-align: center;
font-weight: 700;
font-size: 1.25em;
padding: 16px;
}
#block {
grid-area: 2 / 2 / 3 / span 3;
background-color: orange;
line-height: 84px;
}JS
var controls = document.querySelector('.controls');
var allSelect = document.querySelectorAll('.controls select');
var block = document.querySelector('#block');
controls.addEventListener('change', function (evt) {
var val = "";
for (var i = 0; i < allSelect.length; i++) {if (window.CP.shouldStopExecution(0)) break;
val += allSelect[i].options[allSelect[i].selectedIndex].value;
if (i < allSelect.length - 1) {val += " / ";}
}window.CP.exitedLoop(0);;
block.style.gridArea = val;
}, false);
//# sourceURL=pen.jsКлючове слово span
HTML
<div class="box">
<div class="item">grid-area: 1 / 2 / span 2 / span 2;</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 1px;
font-family: monospace;
}
.box .item {
background-color: #999;
color: #222;
text-align: center;
font-weight: 700;
font-size: 1.25em;
padding: 16px;
}
.box .item:first-child {
grid-area: 1 / 2 / span 2 / span 2;
background-color: orange;
line-height: 84px;
}Сітка 3×3, у підписах — самі значення grid-area. Видно, що це номери ліній: щоб зайняти всю першу смугу з трьох колонок, кінцева колонкова лінія має бути 4, а не 3.
HTML
<div class="layout">
<div class="head">1 / 1 / 2 / 4</div>
<div class="side">2 / 1 / 4 / 2</div>
<div class="main">2 / 2 / span 2 / span 2</div>
</div>CSS
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 52px);
gap: 4px;
width: 340px;
font: 12px monospace;
}
.layout div {
display: grid;
place-items: center;
color: #fff;
}
.head {
grid-area: 1 / 1 / 2 / 4;
background: #0172ad;
}
.side {
grid-area: 2 / 1 / 4 / 2;
background: #3f8fbf;
}
.main {
grid-area: 2 / 2 / span 2 / span 2;
background: #7fb2d4;
}Коментарі
Коментарів ще немає — будьте першим!