Gridi za CSS Zilizojumuishwa
Katika mfumo wa gridi, kuna uwezo wa kuongeza gridi mpya iliyojumuishwa kwenye gridi yako iliyoundwa. Gridi zilizojumuishwa hutumiwa sana kwa kuweka vipengele vidogo ndani ya vitalu vya tovuti.
Ili kutumia uwezo huu, unahitaji kuweka sifa
display kwa thamani grid kwenye kipengele cha mtoto chenyewe.
Kwa mfano, wacha tuunde gridi nyingine ndani ya moja ya seli za gridi:
<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;
}
:
Acha uwe na gridi inayojumuisha vipengele vitano, viliyopangwa kwenye safu wima tatu. Unda gridi iliyojumuishwa kwenye kipengele cha pili, ambayo kwa upande wake itakuwa na vipengele vitatu vya watoto.
Badilisha shida iliyotangulia ili gridi iliyojumuishwa iwe na vipengele vitano vya watoto.
Unda gridi zilizojumuishwa kwenye vipengele vya kwanza na vya tatu kila moja ikiwa na vipengele vitatu vya watoto.
