Met le premier caractère en majuscule
Définition et utilisation de La propriété css grid-column-start
La propriété CSS grid-column-start permet de définir à quelle colonne du grille commence un élément. Elle peut être utilisée en combinaison avec la propriété grid-column-end pour définir une plage de colonnes sur lesquelles un élément doit être placé.
La Syntaxe CSS
Voici la syntaxe de la propriété grid-column-start :
grid-column-start: <integer> | <name> | span <integer>;
Les valeurs possibles sont :
<integer> : définit le numéro de la colonne de départ. Par exemple, si vous définissez grid-column-start: 2, l'élément sera placé à partir de la deuxième colonne de la grille.
<name> : définit le nom de la colonne de départ. Si vous avez donné des noms aux colonnes de la grille en utilisant la propriété grid-template-columns, vous pouvez les utiliser ici pour définir la colonne de départ.
span <integer> : permet à l'élément de couvrir plusieurs colonnes. Par exemple, si vous définissez grid-column-start: span 2, l'élément couvrira les deux premières colonnes de la grille.
Voici un exemple qui montre comment utiliser différentes valeurs pour la propriété grid-column-start :
Exemple 📋 Copier le code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item1 {
grid-column-start: 1;
}
.item2 {
grid-column-start: 2;
}
.item3 {
grid-column-start: 3;
}
.item4 {
grid-column-start: span 2;
}
.item5 {
grid-column-start: 2;
}
.item6 {
grid-column-start: 3;
}Dans cet exemple, l'élément item1 est placé à partir de la première colonne de la grille, l'élément item2 est placé à partir de la deuxième colonne, etc. L'élément item4 couvre les deux premières colonnes de la grille en utilisant la valeur span 2.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridColumnStart="3" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Voici comment utiliser la propriété grid-column-start :
Définissez un conteneur comme élément de grille en utilisant la propriété display: grid.
Définissez les colonnes et les lignes de la grille en utilisant les propriétés grid-template-columns et grid-template-rows.
Placez les éléments enfants du conteneur de grille en utilisant les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.
Voici un exemple de code qui utilise la propriété grid-column-start :
Exemple 📋 Copier le code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item1 {
grid-column-start: 1;
grid-row-start: 1;
}
.item2 {
grid-column-start: 2;
grid-row-start: 1;
}
.item3 {
grid-column-start: 3;
grid-row-start: 1;
}
.item4 {
grid-column-start: 1;
grid-row-start: 2;
}
.item5 {
grid-column-start: 2;
grid-row-start: 2;
}
.item6 {
grid-column-start: 3;
grid-row-start: 2;
}Dans cet exemple, le conteneur est une grille de 3 colonnes et 2 lignes, et les éléments item1 à item6 sont placés dans les colonnes et les lignes de la grille en utilisant les propriétés grid-column-start et grid-row-start.