CSS හි උප ජාල
උප ජාලය ක්රමාරූපී ජාලයක විචල්යයක් වේ, නමුත් එයට වඩා එය මූල ජාල බහාලුම්කරුගේ ප්රමාණයට බලපායි. උප ජාලයක් නිර්වචනය කිරීම සඳහා බාල අංගයේම 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;
}
:
ඔබට අංග පහකින් සමන්විත, තීරු දෙකකින් සකස් කරන ලද ජාලයක් ඇතැයි සිතමු. තෙවන අංගය තුළ ක්රමාරූපී ජාලයක් සාදන්න, එහිදී බාල අංග දෙකක් ඇත.
කලින් කාර්යය වෙනස් කරන්න, ක්රමාරූපී ජාලය තුළ බාල අංග හතරක් ඇති වන පරිදි.
ක්රමාරූපී ජාල දෙකක් සාදන්න - දෙවන අංගය සහ පස්වන අංගය තුළ.
