grid-row-end в CSS — кінець елемента грида по вертикалі
автор: Svitlana
Загальний опис
автор: NagarD
Синтаксис
grid-row-end: <number> | <name> | span <number> | span <name> | auto;Властивість grid-row-end може отримувати 4 значень:
-
<line> -
Може бути цифрою, яка означає нумеровану лінію сітки або ім'я для посилання на названу лінію сітки
автор: Svitlana -
span <number> -
Елемент буде проходити через вказану кількість сіткових доріжок
автор: Svitlana -
span <name> -
Елемент буде розширюватися, доки не потрапить на рядок із зазначеним іменем
автор: Svitlana -
auto -
Вказує автоматичне місце розташування елементу у сітці
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.grid-row-end |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Ключове слово 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"><code>grid-row-end:<br> span 2;</code></div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</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;
text-align: center;
}
.box .item:nth-child(5) {
grid-row-end: span 2;
background: gold;
font-size: 1.25em;
}Елемент закінчується на третій рядковій лінії: разом із автоматичним початком це дає висоту у два ряди.
HTML
<div class="box">
<div class="item">grid-row-end: 3</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>CSS
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
gap: 4px;
}
.box div {
background: #eee;
padding: 8px;
}
.box .item {
grid-row-end: 3;
background: #0172ad;
color: #fff;
}Динамічний приклад
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Простий приклад роботи властивості
HTML
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item"><code>grid-row-end: 4;</code></div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 2px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}
.box .item:nth-child(4) {
grid-row-start: 1;
grid-row-end: 4;
background: gold;
font-size: 1.35em;
padding-top: 25%;
}Вісім однакових сіток по одному стовпцю, і в кожній синій блок закінчується по-різному: явним номером, -1 у сітці з трьома рядками в шаблоні, -1 у сітці, де рядки неявні (видно, що до низу він НЕ доходить), недійсним нулем, розтягом span 2, скороченням grid-row: 2 без кінця, іменем лінії з grid-template-areas і парою 3/1, яку браузер мовчки перевертає. Останній ряд — той самий запис на дитині флексбокса: значення обчислюється, але нічого не робить.
HTML
<div class="lab">
<p>grid-row-end: 4</p>
<div class="g"><span class="it a">4</span><i></i></div>
</div>
<div class="lab">
<p>-1 у явній сітці — до низу</p>
<div class="g"><span class="it b">-1</span></div>
</div>
<div class="lab">
<p>-1 у неявній — НЕ до низу</p>
<div class="g auto"><span class="it b">-1</span><i></i><i></i></div>
</div>
<div class="lab">
<p>grid-row-end: 0 — недійсно</p>
<div class="g"><span class="it c">0</span><i></i><i></i></div>
</div>
<div class="lab">
<p>grid-row-end: span 2</p>
<div class="g"><span class="it d">span 2</span><i></i></div>
</div>
<div class="lab">
<p>grid-row: 2 — кінець auto</p>
<div class="g"><i></i><span class="it e">2</span><i></i></div>
</div>
<div class="lab">
<p>ім'я лінії з areas</p>
<div class="g areas"><span class="it f">ft-end</span></div>
</div>
<div class="lab">
<p>3 / 1 — браузер перевернув</p>
<div class="g"><span class="it h">3/1</span><i></i></div>
</div>
<div class="lab">
<p>той самий запис у флексбоксі</p>
<div class="fx"><span class="it k">4</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: 150px;
min-height: 32px;
font: 600 .85em/1.3 system-ui, sans-serif;
color: #5a6472;
}
.g {
display: grid;
grid-template-columns: 90px;
grid-template-rows: 40px 40px 40px;
grid-auto-rows: 20px;
gap: 4px;
padding: 4px;
background: #eef1f5;
border: 1px dashed #b9c6d8;
}
.g.auto {
grid-template-rows: none;
grid-auto-rows: 40px;
}
.g.areas {
grid-template-areas: "hd" "bd" "ft";
}
.g i {
background: #fff;
}
.fx {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px;
background: #eef1f5;
border: 1px dashed #b9c6d8;
width: 98px;
height: 128px;
}
.fill {
flex: 1 1 auto;
background: #fff;
}
.it {
display: flex;
align-items: center;
justify-content: center;
background: #2f6fd0;
color: #fff;
font: 600 .85em system-ui, sans-serif;
}
.a {
grid-row-start: 1;
grid-row-end: 4;
}
.b {
grid-row-start: 1;
grid-row-end: -1;
}
.c {
grid-row-start: 1;
grid-row-end: 0;
}
.d {
grid-row-start: 1;
grid-row-end: span 2;
}
.e {
grid-row: 2;
}
.f {
grid-row-start: bd-start;
grid-row-end: ft-end;
}
.h {
grid-row-start: 3;
grid-row-end: 1;
}
.k {
flex: 0 0 40px;
grid-row-end: 4;
}Коментарі
Коментарів ще немає — будьте першим!