Fusion de colonnes dans les grilles CSS
De manière similaire, il est possible de fusionner
des colonnes en utilisant la propriété
grid-column.
Supposons que nous ayons une grille avec quatre éléments. Maintenant, faisons en sorte que les premier, deuxième et troisième éléments se positionnent sur la première ligne. Et que le quatrième élément occupe toute la deuxiè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 / 2;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 3 / 4;
}
#elem4 {
grid-column: 1 / 4;
}
:
Positionnez tous les éléments et fusionnez les colonnes conformément à l'exemple suivant :
Positionnez tous les éléments et fusionnez les colonnes conformément à l'exemple suivant :
Positionnez tous les éléments et fusionnez les colonnes conformément à l'exemple suivant :
