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:

Синтаксис

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

<name>

Ім'я для елемента сітки.

<row-start> / <column-start> / <row-end> / <column-end>

Значення для під-властивостей grid-row-start, grid-column-start, grid-row-end, grid-column-end відповідно.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5

.box {


  grid-area: 1 / 2/ 1 / 6;


}

.box {


  grid-area: header;


}

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