oujood.com

Utiliser la propriété grid-column-start pour positionner des éléments sur une grille CSS

chercher |

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éfautauto
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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.


MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

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

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe