Rrjetat e brendshme CSS Grid
Në sistemin grid ekziston mundësia të shtosh një rrjetë të re të brendshme brenda rrjetës së krijuar tashmë.
Rrjetat e brendshme përdoren gjerësisht për vendosjen e elementeve të vegjël brenda blloqeve të një faqeje.
Për të përfituar nga kjo mundësi, duhet të vendosni në vetë elementin fëmijë vetinë
display me vlerën grid.
Për shembull, le të krijojmë një rrjetë tjetër brenda një prej qelizave të rrjetës:
<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;
}
:
Le të supozojmë se keni një rrjetë të përbërë nga pesë elemente, të vendosura në tre kolumna. Krijoni një rrjetë të brendshme në elementin e dytë, e cila do të përmbajë tre elementë fëmijë.
Modifikoni detyrën e mëparshme në mënyrë që rrjetë e brendshme të përmbajë pesë elementë fëmijë.
Krijoni një rrjetë të brendshme në elementin e parë dhe të tretë, secila prej tyre duhet të përmbajë tre elementë fëmijë.
