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