propriété grid-column-start

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.

Liste des propriétés css

Les propriétés CSS par ordre alphabétique

Définition et utilisation de La propriété css grid-column-start

Prise en charge de la propriété dans les navigateurs

La méthode secrète likes sans fin sur Facebook