CSSда Подгридлар
Подгрид ички гриднинг бир турі бўлиб, ундан фарқли ўларок, ота-она грид-контейнерининг ўлчамига таъсир қилади.
Подгридни белгилаш учун
фарзанд элементнинг ўзида display хусусиятини
display subgrid қиймати билан қўйиш керак.
Мисол учун келтирайлик, тўртинчи элементда ички грид яратайлик:
<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: subgrid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 5px;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Сизда икки устуң бўйича жойлашган бешта элементдан иборат грид бор деб фараз қилайлик. Учинчи элементда ички грид яратинг, унинг ўзида эса иккита фарзанд элемент бўлсин.
Олдинги машқни ўзгартиринг, ички гридда тўртта фарзанд элемент бўлсин.
Иккита ички грид яратинг - иккинчи элементда ва бешинчи элементда.
