Уласцівасць grid-row
Уласцівасць grid-row
задае
пачатковую і канчатковую пазіцыі элемента
ў грідзе або сетцы па радах. Значэннямі ўласцівасці могуць
быць дадатныя або адмоўныя лікі,
паказаныя праз слэш. Першы лік абазначае
пачатковую пазіцыю элемента, другі - канчатковую пазіцыю.
Калі ў якасці значэння задаем дадатны лік,
то пазіцыя элемента адлічваецца зверху
ўніз. Пры паказе адмоўнага ліку элемент
будзе размяшчацца ў адваротным парадку,
г.зн. знізу ўверх.
Сінтаксіс
селектар {
grid-row: пачатковая пазіцыя / канчатковая пазіцыя;
}
Прыклад
Давайце зададзім элементам у грідзе пачатковыя і канчатковыя пазіцыі:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
Прыклад
А цяпер давайце ва ўласцівасці grid-row
пакажам адмоўныя лікі:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: -1 / -2;
}
#elem2 {
grid-row: -2 / -3;
}
#elem3 {
grid-row: -3 / -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: 1 / 3; /* два рады */
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 2 / 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: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
#elem4 {
grid-row: 1 / 4;
}
:
Прыклад
Скамбінуем уласцівасці grid-row
і grid-column
:
<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 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
Прыклад
А цяпер давайце зробім так, каб першы і пяты блокі займалі ўвесь рад, а другі блок - два рады і дзве калонкі, а трэці і чацвёрты блокі - адзін рад і дзве калонкі:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
Глядзіце таксама
-
уласцівасць
grid-column
,
якая задае пачатковую і канчатковую пазіцыі элемента ў грідзе па слупках -
уласцівасць
grid-row-start
,
якая задае пачатковую пазіцыю элемента ў грідзе па радах -
уласцівасць
grid-row-end
,
якая задае канчатковую пазіцыю элемента ў грідзе па радах