Suprapunerea coloanelor în grid-urile CSS
În situația în care mai multe elemente ocupă aceeași coloană, se poate observa suprapunerea lor, prin care fiecare element ulterior se deplasează pe un rând mai jos.
Să facem în grid-ul nostru astfel încât primul element să se poziționeze pe primul rând, al doilea - pe al doilea, iar al treilea și al patrulea - pe al treilea rând:
<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;
}
:
Implementați următorul exemplu:
Implementați următorul exemplu:
Implementați următorul exemplu:
