grid-column-end в CSS — кінець елемента грида по горизонталі
Властивість grid-column-end визначає стовпчик у сітці, де буде закінчуватися розташування вибраного елементу і скільки треків він охоплює.
Наприклад:
.box .item {
display: grid;
grid-column-end: 4; /* Цей елемент буде перенесений до 3-ї колонки сітки */
}
Точніше, номер 4 насправді відноситься до кінцевої лінії. Таким чином, елемент закінчується стовпчиком 4 у сітці.
Ви також можете використовувати іменовані області:
/* визначаємо іменовані області */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* використовуємо їх для задання координат */
.box >` .item {
grid-column-end: f;
}
Ви також можете посилатися на будь-які неявні (і явні) названі лінії, які були визначені в сітці. Неявні названі рядки створюються автоматично, коли ви створюєте іменовану область. Тому, коли ви створюєте іменовану область сітки (як у попередньому прикладі), створюється цілий набір невних названих рядків.
Для кожної названої сіткової області з ім'ям foo створюються чотири неявні іменовані рядки. Два імені, що називаються foo-start, називаються рядками початку рядка і стовпця та двома імені foo-end називаються рядками кінці рядка і стовпця.
Таким чином, ми можемо взяти приклад, і додати -start до f, і тепер ми будемо звертатися до неявних названих рядків:
/* визначаємо іменовані області */
grid-template-areas:
"a b c"
"d e f"
"g h i";
/* використовуємо їх для задання координат */
.box >` .item {
grid-column-end: f-end;
}
Таким чином, ми фактично не визначали f-start в будь-якому місці коду. Вони були автоматично створені з наших іменованих областей.
Коли ви посилаєтеся на іменовану область сітки (як у попередньому прикладі), браузер фактично обирає початковий край цієї області. CSS також дозволяє вказувати власні імена для ліній сітки. Вони називаються явними іменованими рядками. Ви можете створювати ці імена, коли ви визначаєте треки, а потім звертаєтесь до них, як з неявними іменованими рядками:
/* визначаємо стовпці й іменовані лінії */
grid-template-columns: 1fr [col1-end] 1fr [col2-end] 1fr [col3-end];
/* звертаємося до іменованої лінії */
.box >` .item {
ggrid-column-end: col3-end;
}
Ключове слово span може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька треків:
Загальний опис
автор: NagarD
Синтаксис
grid-column-end: <number> | <name> | span <number> | span <name> | auto;Властивість grid-column-end може отримувати 4 значень:
-
<line> -
Може бути цифрою, яка означає нумеровану лінію сітки або ім'я для посилання на названу лінію сітки
автор: Svitlana -
span <number> -
Елемент буде проходити через вказану кількість сіткових доріжок
автор: Svitlana -
span <name> -
Елемент буде розширюватися, доки не потрапить на рядок із зазначеним іменем
автор: Svitlana -
auto -
Вказує автоматичне місце розташування елементу у сітці
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridColumnEnd |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Елемент закінчується на третій колонковій лінії: разом із автоматичним початком це дає ширину у дві колонки.
HTML
<div class="box">
<div class="item">grid-column-end: 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-end: 3;
background: #0172ad;
color: #fff;
}Ключове слово 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">6</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: 2px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.5em;
padding: 16px;
}
.box .item:nth-child(5) {
grid-column-end: span 2;
background: gold;
}Простий приклад роботи властивості
HTML
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item"><code>grid-column-end: 4;</code></div>
<div class="item">5</div>
<div class="item">6</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 2fr;
grid-gap: 2px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
}
.box .item:nth-child(4) {
grid-column-end: 4;
background: gold;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-row-end</strong>:</p>
<input type="number" class="input" min="1" value="4">
<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 class="item">9</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 2fr;
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-end: 4;
background: gold;
}JS
var input = document.querySelector('.input');
var box = document.querySelector('.box');
var block = document.querySelector('#block');
input.addEventListener('change', function () {
block.style.gridRowEnd = this.value;
}, false);
//# sourceURL=pen.jsШість однакових сіток по три стовпці, і в кожній синій блок закінчується по-різному: явним номером, -1, іменем лінії з grid-template-areas, недійсним нулем (елемент лишається шириною в одну доріжку), скороченням grid-column: 2 без кінця й розтягом span 2. Останній ряд — той самий запис на дитині флексбокса: значення обчислюється, але нічого не робить.
HTML
<div class="lab">
<p>grid-column-end: 3</p>
<div class="g"><span class="it a">3</span><i></i></div>
</div>
<div class="lab">
<p>grid-column-end: -1</p>
<div class="g"><span class="it b">-1</span></div>
</div>
<div class="lab">
<p>grid-column-end: hdr-end</p>
<div class="g areas"><span class="it c">hdr-end</span></div>
</div>
<div class="lab">
<p>grid-column-end: 0 — недійсно</p>
<div class="g"><span class="it d">0</span><i></i><i></i></div>
</div>
<div class="lab">
<p>grid-column: 2 — кінець auto</p>
<div class="g"><i></i><span class="it e">2</span><i></i></div>
</div>
<div class="lab">
<p>grid-column-end: span 2</p>
<div class="g"><span class="it f">span 2</span><i></i></div>
</div>
<div class="lab">
<p>той самий запис у флексбоксі</p>
<div class="fx"><span class="it h">3</span><span class="fill"></span></div>
</div>CSS
.lab {
display: inline-block;
margin: 0 16px 16px 0;
vertical-align: top;
}
.lab p {
margin: 0 0 6px;
max-width: 190px;
font: 600 .85em/1.3 system-ui, sans-serif;
color: #5a6472;
}
.g {
display: grid;
grid-template-columns: 60px 60px 60px;
grid-auto-rows: 30px;
gap: 4px;
padding: 4px;
background: #eef1f5;
border: 1px dashed #b9c6d8;
}
.g.areas {
grid-template-areas: "hdr hdr side";
}
.g i {
background: #fff;
}
.fx {
display: flex;
gap: 4px;
padding: 4px;
background: #eef1f5;
border: 1px dashed #b9c6d8;
width: 196px;
}
.fill {
flex: 1 1 auto;
background: #fff;
}
.it {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
background: #2f6fd0;
color: #fff;
font: 600 .85em system-ui, sans-serif;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
.b {
grid-column-start: 1;
grid-column-end: -1;
}
.c {
grid-column-start: hdr-start;
grid-column-end: hdr-end;
}
.d {
grid-column-start: 1;
grid-column-end: 0;
}
.e {
grid-column: 2;
}
.f {
grid-column-end: span 2;
}
.h {
flex: 0 0 60px;
grid-column-end: 3;
}Коментарі
Коментарів ще немає — будьте першим!