Хосияти grid-template-rows
Хосияти grid-template-rows шумора ва бараии қаторҳоро муайян мекунад,
ки элемент дар grid ё шабака ишғол мекунад.
Дар қимати хосият бараии қаторҳоро
ба ҳар яке аз воҳидҳои андоза муайян мекунем.
Хосият дар элемент-падар мушаххас карда мешавад
ва бараии қаторҳои элементҳо-фарзандро муайян мекунад.
Ҳангоми мушаххас кардани қиматҳо дар хосиятҳо бо пиксел
андозаҳои қаторҳо дақиқ ба онҳо мувофиқ хоҳанд буд.
Агар мо калимаи auto-ро муайян кунем, қаторҳо
ҳамаи фазои дастрасро пур мекунанд. Истифодаи
воҳиди fr (фраксия) маънои онро дорад,
ки ҳамаи фазо ба қисмҳои баробар тақсим карда мешавад.
Арзиши fr дар созгоршавии он ба
контейнерҳои гуногун ё андозаҳои гуногуни экран аст,
зеро ки fr фақат онҳоро ба шумораи муайяншудаи
фраксияҳо бе пайваст ба андозаи дақиқ бо пиксел тақсим мекунад.
Синтаксис
интихобкунанда {
grid-template-rows: бараии қатор;
}
Намуна
Биёед бараии қаторҳоро барои элементҳои мо дар grid муайян кунем:
<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 муайян мекунад -
хосияти
grid-auto-rows,
ки шумора ва бараии қаторҳоро дар grid-и нозер муайян мекунад
