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


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

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

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

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


}

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