Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

grid-row et grid-column

Description des propriétés grid-row et grid-column.

Ces deux propriétés définissent sur quelle ligne et quelle colonne doit être positionné un élément dans une grille. Elles s'appliquent donc à un des éléments de la grille et non pas au container.

Pour chacune de ces propriétés, il est possible de spécifier deux valeurs séparées par un slash ( / ) : l'élément s'étendra alors sur plusieurs lignes ou plusieurs colonnes.

grid-row est une propriété raccourcie pour :

  • grid-row-start : numéro de la ligne où commencera l'élément.
  • grid-row-end : numéro de la ligne contre laquelle s'arrêtera l'élément, ou avec le mot span, le nombre de lignes sur lequel s'étendra l'élément.

grid-column est une propriété raccourcie pour :

  • grid-column-start : numéro de la colonne où commencera l'élément.
  • grid-column-end : numéro de la colonne contre laquelle s'arrêtera l'élément, ou avec le mot span le nombre de colonnes sur lequel s'étendra l'élément.

La numérotation des lignes et des colonnes commence à 1.

Exemple : voici deux syntaxes équivalentes pour décrire une cellule qui s'étend sur la deuxième et la troisième colonne :

grid-column: 2/4; grid-column: 2/span 2;

La page sur la propriété raccourcie grid est également une présentation générale des possibilités des grilles avec les propriétés correspondantes.

Remarque : si vous devez changer dynamiquement les valeurs de ces propriétés, utilisez les propriétés individuelles. Il semblerait que les propriétés raccourcies ne puissent pas être modifiées par programme sur certains navigateurs.

Internet Explorer ne supporte pas le placement automatique des éléments dans une grille. Pour ce navigateur, tous les éléments doivent donc être positionnés avec les propriétés -ms-grid-row et -ms-grid-column.

Syntaxes pour grid-row et grid-column.

  • grid-row: 2; grid-column: 5;

    Une seule valeur est indiquée : l'élément sera positionné sur cette ligne ou cette colonne.

    Il s'agit d'une valeur supérieure à 0, sans unité.

    Si nécessaire, le navigateur peut ajouter des lignes ou des colonnes à la grille pour satisfaire le placement de l'élément sur la ligne et la colonne indiquées.

  • grid-row: 2 / 3; grid-column: 5 / 7;

    Deux nombres sans unités et supérieurs à 0, séparés par une bare oblique (/). L'élément s'étendra depuis la première ligne ou colonne indiquée, et s'étendra jusqu'à buter sur la deuxième.

    Avec les valeurs choisies pour notre exemple, l'élément commence à la ligne 2 et vient buter sur la ligne 3. Autrement dit il n'occupe qu'une seule ligne. Pour les colonnes, il commence sur la colonne 5 et vient buter sur la colonne 7. Il couvre donc les colonnes 5 et 6.

    Exemple pour les propriétés grid-row et grid-column

  • grid-row: 2 / span 2; grid-column: 5 / span 3;

    Le mot span introduit le nombre de colonnes ou de lignes sur lequel s'étend l'élément.

    Avec les valeurs choisies pour notre exemple, l'élément commence sur la ligne 2 et couvre deux lignes. Il commence sur la colonne 5 et couvre 3 colonnes (les colonnes 5, 6 et 7).

    Exemple pour les propriétés grid-row et grid-column avec span

  • grid-row: initial;

    La valeur initiale est auto.

  • grid-row: unset; grid-row: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur applique les valeurs que vous choisissez sur l'élément numéro 10, celui qui est en bleu. Observez comment les autres éléments se disposent en fonction de la place restante.

Pour grid-column, vous pouvez saisir des numéros de colonnes qui n'existent pas encore : elles seront créées.

Ajouter un préfixe :
grid-row :
grid-column :

Attention, sur IE, il est nécessaire d'utiliser les propriétés -ms-grid-row-span et -ms-grid-column-span pour définir une cellule couvrant plusieurs lignes ou plusieurs colonnes.
D'autre part, comme le positionnement automatique n'est pas possible, la cellule bleue peut recouvrir les autres cellules initialement prévues à cet endroit.
Pour plus d'informations sur la gestion des grilles sous IE, reportez-vous à la page grid.

-ms-grid-row :
-ms-grid-row-span :
-ms-grid-column :
-ms-grid-column-span :
1
2
3
4
5
6
7
8
9
10

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui traite les propriétés relatives aux grilles de façon différente. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.