grid-template-columns хусусияти
grid-template-columns хусусияти
гридда ёки сеткадаги элемент эгаллайдиган
устунларнинг сони ва энини белгилайди.
Хусусият ота-элементда кўрсатилиб,
бола-элементларнинг устунлари энини аниқлайди.
Хусусият қийматида устунлар энини
ҳар қандай ўлчов бирликларида
кўрсатамиз.
Хусусиятларда пикселларда қийматлар кўрсатилганда
устунлар ўлчоми айнан уларга мос келади.
Агар биз auto сўзини белгиласак, устунлар
мавжуд бўлган ҳамма фазони тўлдиради.
fr (фракция) бирлигини ишлатиш
ҳамма фазо тенг улушларга бўлинади деганиди.
fr нинг афзаллиги унинг турли
контейнерларга ёки экран разрешенияларига мослашувчанлигидир,
чунки fr уларни пикселлардаги аниқ ўлчамга богланмасдан
кўрсатилган фракциялар сонига бўлади.
Синтаксис
селектор {
grid-template-columns: устун эни;
}
Мисол
Келинг, гриддаги элементларимиз учун устунлар энини белгилаймиз:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 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-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Мисол
Энди grid-template-columns
хусусияти ёрдамида
биринчи ва иккинчи
устунлар контейнернинг бир улушини эгалласин,
учинчи устун эса - уч улушини эгалласин:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Мисол
Келинг, grid-template-columns
хусусиятида repeat() функсиясини кўрсатамиз,
у контейнерга ҳамма уч устуннинг эни тенг бўлиши кераклигини билдиради:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
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>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
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>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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-columns: repeat(auto-fill, minmax(150px, 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-columns: repeat(auto-fit, minmax(150px, 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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-rowsхусусияти,
у гриддаги қаторлар сони ва энини белгилайди -
grid-auto-columnsхусусияти,
у нозим гриддаги устунлар сони ва энини белгилайди
