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;
}
:
Мисол
Келинг, биринчи икки қаторга контейнернинг бир фракциясида эн берайлик, oxирги икки қаторга эса икки фракцияда эн берайлик:
<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
уч қаторда жойлашган тўққизта ҳужайрали жадвал яратайлик. Бунда иккинчи ва учинчи қаторларнинг эни тенг бўлсин,
ҳар бир устун esa турли энга эга бўлсин:
<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хусусияти,
бу нозим гриддаги қаторлар сони ва энини белгилайди
