Свойство grid-row-start - начальная позиция элемента в ряду
Свойство grid-row-start задает
начальную позицию элемента в гриде или сетке
по рядам. Значением свойства может
быть положительное или отрицательное число.
Если задаем положительное число,
то начальная позиция элемента отсчитывается сверху
вниз. При указании отрицательного числа элемент
будет располагаться в обратном порядке,
т.е. снизу вверх.
Синтаксис
селектор {
grid-row-start: положительное или отрицательное число;
}
Пример
Давайте зададим элементам в гриде начальные позиции:
<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;
}
#elem2 {
grid-row-start: 2;
}
#elem3 {
grid-row-start: 3;
}
:
Пример
А теперь давайте в свойстве grid-row-start
укажем отрицательные числа. Теперь 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;
}
#elem2 {
grid-row-start: -2;
}
#elem3 {
grid-row-start: -3;
}
:
Пример
Сделаем так, чтобы первый блок занимал два ряда.
Для этого нам понадобится скомбинировать
свойства grid-row-start и 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;
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-end,
которое задает конечную позицию элемента в гриде по рядам -
свойство
grid-row,
которое задает начальную и конечную позиции элемента в гриде по рядам -
свойство
grid-template-rows,
которое задает количество и ширину рядов в гриде -
свойство
grid-auto-rows,
которое задает количество и ширину рядов в неявном гриде