css властивість grid-row
Властивість grid-row є універсальною властивістю для grid-row-start і grid-row-end, вказуючи розмір і розташування елементу в стовпчику сітки, визначаючи місце для її розташування.
Коса риска (/) відокремлює значення grid-row-start від grid-row-end. Властивість може приймати також одне значення (яке застосовується для обох під-властивостей).
Наприклад:
.box >` .item {
display: frid;
grid-row: 1 / 3;
}
Цей елемент переноситься до першого рядку і охоплює два. Ви також можете використовувати іменовані області:
/* визначаємо іменовані області */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* використовуємо їх для задання координат */
.box >` .item {
grid-row: a / g;
}
Ви також можете посилатися на будь-які неявні (і явні) названі лінії, які були визначені в сітці. Неявні названі рядки створюються автоматично, коли ви створюєте іменовану область. Тому, коли ви створюєте іменовану область сітки (як у попередньому прикладі), створюється цілий набір невних названих рядків.
Для кожної названої сіткової області з ім'ям foo створюються чотири неявні іменовані рядки. Два імені, що називаються foo-start, називаються рядками початку рядка і стовпця та двома імені foo-end називаються рядками кінці рядка і стовпця.
Таким чином, ми можемо взяти приклад, і додати -start до a і -end до g, і тепер ми будемо звертатися до неявних названих рядків:
/* визначаємо іменовані області */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* використовуємо їх для задання координат */
.box >` .item {
grid-column: a-start / g-end;
}
Таким чином, ми фактично не визначали a-start або g-end в будь-якому місці коду. Вони були автоматично створені з наших іменованих областей.
Коли ви посилаєтеся на іменовану область сітки (як у попередньому прикладі), браузер фактично обирає початковий край цієї області. Отже, коли ми вказали grid-row: a / g; у попередньому прикладі, браузер насправді використовує a-start / g-end. CSS також дозволяє вказувати власні імена для ліній сітки. Вони називаються явними іменованими рядками. Ви можете створювати ці імена, коли ви визначаєте треки, а потім звертаєтесь до них, як з неявними іменованими рядками:
/* визначаємо стовпці й іменовані лінії */
grid-template-row: [row1-start] 1fr 1fr [row2-end] 1fr;
/* звертаємося до іменованої лінії */
.box >` .item {
grid-row: row1-start / row2-end;
}
Ключове слово span може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька треків:
Синтаксис
grid-row: <grid-line> [ / <grid-line> ];Властивість grid-row може отримувати одне значення:
<start-line> / <end-line>Значення для, відповідно
grid-row-startіgrid-row-end
| Значення без задання: | auto / auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridRow |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| grid-row | 57.0 |
16.0 |
52.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| grid-row | 57.0 |
52.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Приклад роботи властивості
Ключове слово span
Синтаксис
.box > .item {
display: grid;
grid-row: 1 / 3;
}