Sovrapposizione di colonne nelle griglie CSS
In una situazione in cui più elementi occupano la stessa colonna, può verificarsi una loro sovrapposizione, in cui ogni elemento successivo si sposta sulla riga sottostante.
Facciamo in modo che nella nostra griglia il primo elemento si posizioni sulla prima riga, il secondo sulla seconda, e il terzo e il quarto sulla terza riga:
<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 il seguente esempio:
Implementa il seguente esempio:
Implementa il seguente esempio:
