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қасиеті,
ол жасырын гридтегі қатарлардың саны мен енін белгілейді
