la propriété grid-column et ses valeurs

Méthode #1⁥: utilisez la propriété grid-column pour spécifier sur quelle colonne placer un élément et sur combien de colonnes l'élément s'étendra.

Cette propriété est un raccourci pour les propriétés grid-column-start et grid-column-end⁥:
- l'élément 1 commencera sur la colonne 1 et s'étendra sur deux colonnes.
- l'élément 5 commencera à la colonne 2 et s'étendra sur une seule colonne.
- l'élément 12 commencera à la colonne 1 et s'étendra sur quatre colonnes.
Le code s'écrit⁥:
.grid-container { display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:1em; }

.element1 { grid-column:1/3; }

.element5 { grid-column:2/3; }

.element12 { grid-column:1/5; }




1
2
3
4
5
6
7
8
9
10
11
12







Méthode #2⁥: convoquer la valeur span pour la propriété grid-column…

Utilisez la propriété grid-column pour spécifier sur quelle colonne placer un élément et sur combien de colonnes l'élément s'étendra.

Cette propriété est un raccourci pour les propriétés grid-column-start et grid-column-end⁥:
- l'élément 1 commencera sur la colonne 1 et s'étendra sur deux colonnes.
- l'élément 5 commencera à la colonne 2 et s'étendra sur une seule colonne.
- l'élément 12 commencera à la colonne 1 et s'étendra sur quatre colonnes.
Le code s'écrit⁥:
.grid-container { display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:1em; }

.element1 { grid-column:1/span 2; }

.element5 { grid-column:2/span 1; }

.element12 { grid-column:1/span 4; }




1
2
3
4
5
6
7
8
9
10
11
12