Kuziba Mishororo katika Gridi za CSS
Katika hali ambapo vipengele kadhaa vinachukua shorori moja, inaweza kuzingatiwa kuziba kwao, ambapo kila kipengele kinachofuata kinasogezwa kwenye safu ya chini.
Wacha kwenye gridi yetu tufanye ili kipengele cha kwanza kiwe kwenye safu ya kwanza, cha pili - kwenye safu ya pili, na cha tatu na cha nne - kwenye safu ya tatu:
<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;
padding: 10px;
border: 2px solid #696989;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 4;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 1 / 2;
}
#elem4 {
grid-column: 3 / 4;
}
:
Tekeleza mfano ufuatao:
Tekeleza mfano ufuatao:
Tekeleza mfano ufuatao:
