oujood.com

Découvrez toutes les possibilités de la propriété grid-column en CSS

La propriété CSS grid-column permet de spécifier comment un élément doit être placé sur une grille de mise en page
Créez des mises en page élaborées avec grid-column et la grille de mise en page en CSS

chercher |

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


La propriété CSS grid-column permet de définir la position d'un élément dans une grille CSS. Elle peut être utilisée pour spécifier où l'élément doit être placé dans la grille en termes de lignes et de colonnes.

Pour utiliser la propriété grid-column, vous devez d'abord créer une grille en utilisant la propriété display: grid sur un élément parent. Vous pouvez alors utiliser la propriété grid-template-columns pour définir le nombre de colonnes de la grille et leur largeur.

Voici un exemple de code qui crée une grille avec deux colonnes de largeur égale :

Exemple       Copier le code

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
La propriété grid-column peut être combinée avec d'autres propriétés de grille, comme grid-row et grid-area, pour contrôler la position et la taille de l'élément dans la grille.
La Syntaxe CSS
oici la syntaxe générale de la propriété CSS grid-column :
grid-column:  / ; 
et sont des valeurs numériques qui indiquent les lignes de début et de fin de l'élément sur la grille.

Voici quelques exemples d'utilisation de grid-column :

Pour faire en sorte que l'élément s'étende sur toutes les colonnes de la grille :
grid-column: 1 / -1;
Pour faire en sorte que l'élément s'étende sur les deux premières colonnes de la grille :
grid-column: 1 / 3;
Pour faire en sorte que l'élément s'étende sur la deuxième colonne de la grille :
grid-column: 2 / 2;
Vous pouvez également utiliser des noms de lignes ou de colonnes définis précédemment dans la feuille de style. Par exemple :
.grid {
  display: grid;
  grid-template-columns: [colonne-gauche] 1fr [colonne-centre] 1fr [colonne-droite];
}

.item {
  grid-column: colonne-gauche / colonne-centre;
}
Dans cet exemple, l'élément .item sera placé sur les colonnes de gauche et du centre de la grille.

Valeurs par défautauto/auto
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.gridColumn="2 / span 2"

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

Voici un exemple de code HTML et CSS qui utilise la propriété grid-column pour créer une grille avec deux colonnes de largeur égale et pour placer différents éléments dans des colonnes spécifiques :

Exemple       Copier le code

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid div{
border: solid 1px #000;
}

.item-1 {
  grid-column: 1;
}

.item-2 {
  grid-column: 2;
}

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

.item-4 {
  grid-column: 2 / 3;
}

</style>
</head>
<body>

<h1>La propriété css grid-auto-rows</h1>
<div class="grid">
  <div class="item item-1">Élément 1</div>
  <div class="item item-2">Élément 2</div>
  <div class="item item-3">Élément 3</div>
  <div class="item item-4">Élément 4</div>
</div>
</body>
</html>

Ce code créera une grille avec deux colonnes de largeur égale. L'élément 1 sera placé dans la première colonne, l'élément 2 sera placé dans la seconde colonne et l'élément 3 sera placé sur les deux colonnes. L'élément 4 sera décalé d'une colonne vers la droite et sera placé sur la deuxième colonne.

La propriété grid-column accepte plusieurs valeurs qui permettent de définir la position d'un élément dans une grille de manière plus précise.

Voici quelques exemples de valeurs que vous pouvez utiliser avec grid-column :

Colonnes fractionnaires (fr) : Vous pouvez utiliser la valeur fr pour définir la largeur d'une colonne en termes de fractions de la grille. Par exemple, pour créer une grille avec deux colonnes de largeur égale, vous pouvez utiliser la valeur 1fr 1fr pour grid-template-columns.

Valeurs en pixels (px) : Vous pouvez utiliser la valeur px pour définir la largeur d'une colonne en pixels. Par exemple, pour créer une grille avec deux colonnes de largeur fixe de 100 pixels, vous pouvez utiliser la valeur 100px 100px pour grid-template-columns.
Valeurs en pourcentage (%) : Vous pouvez utiliser la valeur % pour définir la largeur d'une colonne en pourcentage de la largeur de la grille parente. Par exemple, pour créer une grille avec deux colonnes de largeur égale qui occupent chacune 50% de la largeur de la grille, vous pouvez utiliser la valeur 50% 50% pour grid-template-columns.
Valeurs négatives : Vous pouvez utiliser des valeurs négatives avec grid-column pour décaler un élément vers la gauche ou vers le haut de la grille. Par exemple, pour décaler un élément d'une colonne vers la gauche, vous pouvez utiliser la valeur -1 / 1 pour grid-column.

Voici un exemple de code qui utilise plusieurs de ces valeurs avec grid-column :

Exemple       Copier le code

.grid {
  display: grid;
  grid-template-columns: 1fr 200px 50%;
}

.item-1 {
  grid-column: 1;
}

.item-2 {
  grid-column: 2;
}

.item-3 {
  grid-column: 3;
}

.item-4 {
  grid-column: -1 / 1;
}
Ce code créera une grille avec trois colonnes de largeur différente : la première colonne occupera 1 fraction de la largeur de la grille, la deuxième colonne sera de 200 pixels de large et la troisième colonne occupera 50% de la largeur de la grille. L'élément 4 sera décalé d'une colonne vers la gauche et sera placé sur la première colonne.

Voir aussi notre tutoriel sur les grilles : CSS grid : vue en grille



Voir aussi nos tutoriel :

Balise ul

Définit une liste non ordonnée

la fonction explode, explode

Coupe une chaîne en segments

Créer un lien hypertexte

Les liens hypertextes (ou ancres) permettent de lier des pages Web entre elles. Comment ça marche?...