Уласцівасць grid-template-rows
Уласцівасць grid-template-rows задае
колькасць і шырыню радоў, якія
будзе займаць элемент у грідзе або сетцы.
У значэнні ўласцівасці паказваем шырыню радоў
у любых адзінках
для памераў.
Уласцівасць паказваецца ў элеменце-бацьку
і вызначае шырыню радоў элементаў-нашчадкаў.
Пры паказванні ў уласцівасцях значэнняў у пікселях
памеры радоў будуць дакладна ім адпавядаць.
Калі мы задаем слова auto, то рады будуць
запаўняць усё даступная прастору. Выкарыстанне
адзінкі fr (фракцыя) азначае,
што ўся прастора будзе падзелена
на аднолькавыя долі. Перавагай
fr з'яўляецца яго адаптыўнасць да
розных кантэйнераў або дазволам экрана,
паколькі fr проста падзяляе іх на паказаную
колькасць фракцый без прывязкі да дакладнага памеру ў пікселях.
Сінтаксіс
селектар {
grid-template-rows: шырыня рада;
}
Прыклад
Давайце задамо шырыню радоў для нашых элементаў у грідзе:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце пакажам першаму і трэцяму раду фіксаваную шырыню ў пікселях, а другі рад хай аўтаматычна запоўніць даступную прастору:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер з дапамогай уласцівасці
grid-template-rows
зробім так, каб першы і другі
рады занялі адну частку кантэйнера,
а трэці рад - тры часткі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Значэнні, паказаныя ў адзінках fr
могуць прымаць дробны выгляд. Давайце
зменім папярэдні прыклад, паказаўшы
для другога і трэцяга радоў шырыню
ў дробавых ліках:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце ва ўласцівасці grid-template-rows
пакажам функцыю repeat(),
якая паведаміць кантэйнеру, што ўсе
тры рады павінны мець аднолькавую шырыню:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер давайце зменім папярэдні прыклад так, каб да трох аднолькавых радоў дадаўся чацвёрты, які займе дзве фракцыі кантэйнера:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце задамо першым двум радам шырыню ў адну фракцыю кантэйнера, а апошнім двум радам - у дзве фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер давайце ўсталюем шырыню радам
скамбінаваўшы значэнні, паказаныя з дапамогай
функцыі repeat() і свабодных адзінак fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Таксама ў функцыі repeat() можна паказваць
значэнне auto-fill, якое запоўніць
наш кантэйнер аднолькавымі радамі патрэбнай нам шырыні:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Вельмі зручна разам з auto-fill
паказваць функцыю minmax,
якая задае дыяпазон шырыні радоў
ад мінімальнага да максімальнага значэння.
Калі шырыня кантэйнера не змяшчае ўсе
рады, то іх некаторыя з іх перамястяцца
на новы радок, пры гэтым рады ў радку
раўнамерна размеркавацца ў ёй. Давайце зменім
папярэдні прыклад, паказаўшы ў ім функцыю minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Цяпер давайце пакажам уласцівасць auto-fit,
адрозненне якога ад auto-fill заключаецца ў тым,
што яно падганяе колькасць радоў пад
даступную шырыню кантэйнера, пашыраючы або
сціскаючы іх:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Таксама побач з fr можна
выкарыстоўваць значэнні ў %, якія таксама вызначаюць
якую частку кантэйнера будзе займаць рад.
Пры гэтым спачатку будзе вылічвацца памер
рада ў %, а якая засталася свабодная прастора
падзеліцца на фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце выкарыстаем разам уласцівасці
grid-template-columns і
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце з дапамогай уласцівасцей
grid-template-columns і
grid-template-rows
створым табліцу з дзевяці ячаек, размешчаных
у тры рады. Прычым другі і трэці рад будуць мець аднолькавую шырыню,
а кожны слупок - розную шырыню:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер у табліцы з папярэдняга прыкладу зробім верхні рад шырынёй у дзве фракцыі, а першы слупок - у палову фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Глядзіце таксама
-
уласцівасць
grid-template-columns,
якое задае колькасць і шырыню слупкоў у грідзе -
уласцівасць
grid-auto-rows,
якое задае колькасць і шырыню радоў у няяўным грідзе
