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касиети,
ал жашыруун гриддеги катарлардын санын жана туурасын белгилейт
