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 може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька треків:
Загальний опис
автор: NagarD
Синтаксис
grid-column: <grid-line> [ / <grid-line> ];Властивість grid-column може отримувати єдине значення:
-
<start-line> / <end-line> -
Значення для, відповідно
автор: NagarDgrid-column-startіgrid-column-end
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridColumn |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Скорочення початок/кінець: синій елемент простягається від першої до третьої колонкової лінії, тобто на дві колонки.
HTML
<div class="box">
<div class="item">grid-column: 1 / 3</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>CSS
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.box div {
background: #eee;
padding: 8px;
}
.box > .item {
grid-column: 1 / 3;
background: #0172ad;
color: #fff;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-row</strong>:</p>
<input type="number" id="start" class="input" min="1" value="1"><span class="slash">/</span><input type="number" class="input" id="end" min="1" value="3">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item" id="block">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>CSS
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
}
.input {
margin-bottom: 36px;
padding: 4px;
font-size: 18px;
}
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}
#block {
grid-row: 1 / 3;
background: gold;
}
.slash {
font-size: 24px;
font-weight: 700;
margin: 0 5px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('grid-row', document.querySelector('#start').value + '/' + document.querySelector('#end').value));
}));Приклад роботи властивості
HTML
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item"><code>grid-column: 1 / 3;</code></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}
.box .item:nth-child(6) {
grid-column: 1 / 3;
background: gold;
}Ключове слово span
HTML
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item"><code>grid-column: 2 / span 3;</code></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}
.box .item:nth-child(6) {
grid-column: 2 / span 3;
background: gold;
}Сітка з чотирьох колонок. Верхній ряд показує їхні номери, нижче — grid-column: 1 / 3 (це дві колонки, від першої лінії до третьої), span 2 і 1 / -1 на всю ширину.
HTML
<div class="grid">
<div class="h">колонка 1</div>
<div class="h">колонка 2</div>
<div class="h">колонка 3</div>
<div class="h">колонка 4</div>
<div class="i a">grid-column: 1 / 3</div>
<div class="i b">grid-column: span 2</div>
<div class="i c">grid-column: 1 / -1</div>
</div>CSS
body {
font-family: monospace;
font-size: 13px;
padding: 14px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.h {
padding: 6px;
text-align: center;
background-color: #eee;
color: #666;
}
.i {
padding: 14px 8px;
text-align: center;
color: #fff;
border-radius: 4px;
}
.a {
grid-column: 1 / 3;
background-color: #4a6fa5;
}
.b {
grid-column: span 2;
background-color: #2e7d32;
}
.c {
grid-column: 1 / -1;
background-color: #c0392b;
}Коментарі
Коментарів ще немає — будьте першим!