Що таке «grid area»?

CSSJunior~1 хв читання

grid-area - це властивість, яка задає область розміщення елемента в CSS Grid, тобто в яких рядках і колонках він буде перебувати.

Вона може працювати двома способами:

css

.item {
  grid-area: 1 / 2 / 3 / 4;
}

Формат:

javascript

grid-area: row-start / column-start / row-end / column-end;

Тобто елемент почнеться на 1-му рядку, 2-й колонці, і розтягнеться до 3-го рядка і 4-ї колонки.

У контейнері:

css

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

В елементі:

css

.header {
  grid-area: header;
}

Тут grid-area просто посилається на ім'я області, заданої в макеті.

grid-area - це позиція + розмір елемента в координатах сітки, або ім'я області, якщо використовується шаблон grid-template-areas.

Flexbox так не вміє, це одна з ключових відмінностей Grid.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.