grid-template-columns касиети
grid-template-columns касиети
Grid же торчодогу элемент ээлей турган
мамычалардын санын жана туурасын белгилейт.
Касиет ата-эне элементте көрсөтүлүп,
бала элементтердин мамычаларынын туурасын аныктайт.
Касиеттин маанисинде мамычалардын туурасын
өлчөө бирдиктеринде
көрсөтөбүз.
Касиеттерге пикселдеги маанилерди көрсөткөндө
мамычалардын өлчөмдөрү так ошол мааниге дал келет.
Эгерде auto сөзүн белгилесек, анда мамычалар
бардык жеткиликтүү боштукту ээлейт. fr (бөлчөк) бирдигин колдонуу
бардык боштук бирдей үлүшкө бөлүнөт дегенди билдирет.
fr бирдигинин артыкчылыгы ар кандай
контейнерлерге же экрандын ажырагычтыгына ылайыктуулугу,
себеби fr аларды пикселдеги так өлчөмгө байланышпастан
белгиленген бөлчөктөрдүн санына жөнөкөй бөлөт.
Синтаксис
селектор {
grid-template-columns: мамычанын туурасы;
}
Мисал
Grid'деги элементтерибиз үчүн мамычалардын туурасын белгилейли:
<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'деги катарлардын санын жана туурасын белгилейт -
grid-auto-columnsкасиети,
жашырын Grid'деги мамычалардын санын жана туурасын белгилейт
