CSS Grid-ҳои фаромӯшшуда
Дар системаи Grid имконияти илова кардани Grid-и нави фаромӯшшуда ба шабакаи сохтаи худ вуҷуд дорад. Grid-ҳои фаромӯшшуда васеъ дар ҷойгиркунии элементҳои хурд дар дохили блокҳои сомона истифода мешаванд.
Барои истифода бурдани ин имконият, дар худи элементи фарзанд бояд хосияти
display бо қимати grid таъин карда шавад.
Барои мисол, биёед дар яке аз ҳуҷраҳои Grid Grid-и дигаре эҷод кунем:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Фарз кунем, ки шумо Grid-е доред, ки аз панҷ элемент иборат аст ва дар се сутун ҷойгир аст. Дар элементи дуюм Grid-и фаромӯшшуда эҷод кунед, ки худ ба навбат се элементи фарзанд дошта бошад.
Масалаи гузаштаро тавре тағир диҳед, ки дар Grid-и фаромӯшшуда панҷ элементи фарзанд ҷойгир бошад.
Дар элементҳои аввал ва сеюм ба таври алоҳида Grid-ҳои фаромӯшшудое бо се элементи фарзанд эҷод кунед.
