css властивість grid-row


Властивість grid-row є універсальною властивістю для grid-row-start і grid-row-end, вказуючи розмір і розташування елементу в стовпчику сітки, визначаючи місце для її розташування.

Властивість `grid-row`

Коса риска (/) відокремлює значення 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 може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька треків:

Ключове слово `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;


}

Додаткові посилання