Subgrids in CSS
'n Subgrid is 'n variant van 'n geneste rooster,
maar andersins as dit, beïnvloed dit die grootte
van die ouer roosterhouer.
Om 'n subgrid te skep, moet jy
in die kindelement self die eienskap
display met die waarde subgrid stel.
Kom ons skep byvoorbeeld 'n geneste rooster in die vierde element:
<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;
}
:
Gestel jy het 'n rooster wat uit vyf elemente bestaan, gerangskik in twee kolomme. Skep in die derde element 'n geneste rooster, wat op sy beurt twee kindelemente sal hê.
Verander die vorige taak sodat die geneste rooster vier kindelemente bevat.
Skep twee geneste roosters - in die tweede element en in die vyfde element.
