CSS Grid-дегиндеги колонкалардын саны жана туурасы
Grid менен иштөө менен таанышууну
биз колонкалардын санын жана туурасын белгилөөдөн баштайбыз,
алар боюнча балдар элементтери жайгашат.
Бул максатта биз
grid-template-columns касиетин колдонобуз, ал
ата-эне элементинде көрсөтүлөт жана
колонкалардын санын жана туурасын белгилейт, аларды
гриддеги балдар элементтери ээлейт.
Касиеттин маанисинде биз колонкалардын туурасын
пикселдерде көрсөтөбүз.
Мисал
Келгиле, адегенде ата-эне элементин түзөлү
жана аны grid-контейнер кылалы.
Бизде div болсун, анда
төрт балдар элементи жайгашкан. Ага
display касиетинде grid маанисин берөлү,
жана 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: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#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>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Практикалык тапшырмалар
Сизде тогуз балдары бар div болсун. Ата-эне элементин grid-контейнер кылыңыз.
Балдар элементтерин эки
колонкага жайгаштырыңыз, туурасы 200px.
Балдар элементтерин үч
колонкага жайгаштырыңыз, туурасы 150px.
Балдар элементтерин үч
колонкага жайгаштырыңыз: биринчисинин туурасы 100px,
экинчиси 150px, ал эми үчүнчүсү
200px.