Дар CSS grid-ҳо сутунҳоро рӯйҳам ниҳодан
Дар ҳолате, ки чанд элемент як сутуни якхеларо ишғол мекунанд, рӯйҳам ниҳодани онҳо мушоҳида карда мешавад, ки дар он ҳар як элементи баъдӣ ба сатри поёнӣ ҷой иваз мекунад.
Биёед дар grid-и мо чунон кунем, ки элементи якум дар сатри якум ҷой гирад, элементи дуюм - дар сатри дуюм, ва элементи сеюм ва чорум - дар сатри сеюм:
<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;
}
:
Мисоли зеринро амалӣ кунед:
Мисоли зеринро амалӣ кунед:
Мисоли зеринро амалӣ кунед:
