CSS-däki kiçijik gridler
Kiçijik grid, içindäki gridiň bir görnüşi bolup, ondan tapawutlylykda ene-atanyň grid-kontýaineriniň ölçegine täsir edýär.
Kiçijik grid döretmek üçin çaganyň elementinde özünde display häsiýetini subgrid bahasyna goýmak gerek.
Mysal üçin, dördünji elementde içindäki grid döreteliň:
<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;
}
:
Sizde iki sütun boýunca ýerleşdirilen bäş elementden ybarat grid bolsun. Üçünji elementde içindäki grid dörediň, onuň içinde öz gezeginde iki çaga elementi bolsun.
Öňki meseläni içindäki gridde dört çaga element bolşy ýaly üýtgediň.
Iki sany içindäki grid dörediň - ikinji elementde we bäşinji elementlerde.
