Chevauchement des colonnes dans les grilles CSS
Dans une situation où plusieurs éléments occupent la même colonne, on peut observer leur chevauchement, où chaque élément suivant est décalé d'une ligne vers le bas.
Faisons en sorte que dans notre grille, le premier élément se positionne sur la première ligne, le deuxième - sur la deuxième, et les troisième et quatrième - sur la troisième ligne :
<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;
}
:
Implémentez l'exemple suivant :
Implémentez l'exemple suivant :
Implémentez l'exemple suivant :
