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қасиеті
