Vipimo vya Gridi Zisizo Wazi katika CSS
Gridi isiyo wazi hubainisha vipimo vya vipengele
vinavyozidi mipaka yake. Hata hivyo, ikiwa kuna
hitaji, vipimo hivi vinaweza kuwekwa kwa kutumia
sifa za grid-auto-columns na
grid-auto-rows.
Hebu tufanye hivyo:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
:
Acha kwenye gridi yako kuwe na 9 vitalu.
Weka sehemu ya vitalu kwenye gridi
iliyo wazi, na sehemu nyingine ya vitalu kwenye gridi isiyo wazi.
Weka vipimo kwa vitalu vilivyo kwenye sehemu isiyo wazi.
