Свойство grid-row-end - конечная позиция элемента в ряду
Свойство grid-row-end задает
конечную позицию элемента в гриде или сетке
по рядам. Значением свойства может
быть положительное или отрицательное число.
Если задаем положительное число,
то начальная позиция элемента отсчитывается сверху
вниз. При указании отрицательного числа элемент
будет располагаться в обратном порядке,
т.е. снизу вверх.
Синтаксис
селектор {
grid-row-end: положительное или отрицательное число;
}
Пример
Давайте зададим элементам в гриде конечные позиции:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
grid-row-end: 2;
}
#elem2 {
grid-row-start: 2;
grid-row-end: 3;
}
#elem3 {
grid-row-start: 3;
grid-row-end: 4;
}
:
Пример
Сделаем так, чтобы первый блок занимал два ряда:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
grid-row-end: 3;
}
#elem2 {
grid-row-start: 1;
grid-row-end: 2;
}
#elem3 {
grid-row-start: 2;
grid-row-end: 3;
}
:
Пример
Теперь давайте назначим четвертому блоку три ряда:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
grid-row-end: 2;
}
#elem2 {
grid-row-start: 2;
grid-row-end: 3;
}
#elem3 {
grid-row-start: 3;
grid-row-end: 4;
}
#elem4 {
grid-row-start: 1;
grid-row-end: 4;
}
:
Пример
А теперь давайте в свойствах grid-row-start
и grid-row-end укажем отрицательные числа.
Теперь elem3 будет занимать самый верхний
ряд, а elem1 - самый нижний:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: -1;
grid-row-end: -2;
}
#elem2 {
grid-row-start: -2;
grid-row-end: -3;
}
#elem3 {
grid-row-start: -3;
grid-row-end: -4;
}
:
Смотрите также
-
свойство
grid-row-start,
которое задает начальную позицию элемента в гриде по рядам -
свойство
grid-row,
которое задает начальную и конечную позиции элемента в гриде по рядам -
свойство
grid-template-rows,
которое задает количество и ширину рядов в гриде -
свойство
grid-auto-rows,
которое задает количество и ширину рядов в неявном гриде