Iç içe geçen CSS gridleri
Grid ulgamyna, özüňiziň döreden toruňyzda täze iç içe geçen grid goşup bolýar. Iç içe geçen gridler sahypalaryň bloklary içinde kiçi elementleri ýerleşdirmekde giňden ulanylýar.
Bu mümkinçilikden peýdalanmak üçin, çaga elementinde özünde
display aýratynlygyny grid bahasy bilen görkezmelis.
Mysal üçin, gridiň bir öýjüginde ýene bir grid döredeliň:
<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;
}
:
Siziň üç sütundan ybarat bolan, bäş elementli gridiňiz bolsun. Ikkinji elementde, öz gezeginde üç çaga elementi bolan iç içe geçen grid dörediň.
Öňki meseläni iç içe geçen gridde bäş çaga element boljak şekilde üýtgediň.
Bir we üçünji elementlerde üçer çaga elementi bolan iç içe geçen grid dörediň.
