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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
grid-row	57.0	52.0	10.1	44.0	16.0	16.0

Підтримка: мобільні переглядачі

Переглядач
grid-row	57.0	52.0	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div class="item">grid-row: 1 / 3</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

.box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 50px;
    gap: 4px;
}

.box div {
    background: #eee;
    padding: 8px;
}

.box > .item {
    grid-row: 1 / 3;
    background: #0172ad;
    color: #fff;
}