Grid-row et grid-column - Propriétés CSS

grid-row
grid-row-start
grid-row-end
grid-column
grid-column-start
grid-column-end

Résumé des caractéristiques de la propriété grid-row

Description rapide
Numéro(s) de(s) lignes) où doit se positionner cet élément dans la grille.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | span
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Integer : lors d'une animation, la propriété grid-row passe d'un nombre entier à un autre, sans transition.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de grid-row.

grid-row - Syntax DiagramSyntax diagram of the grid-row CSS property. See stylescss.free.fr for details. auto auto integer1 integer1 id id / / / span / span auto auto integer1 integer1 id id integer2 integer2 id idgrid-row:;grid-row:;
Schéma syntaxique de la propriété grid-row
La syntaxe de grid-column est exactement identique
Les liens du schéma donnent accès à plus de détails

Les termes utilisés sur le schéma sont décrits ci-dessous :

  • integer1 est un nombre entier positif, sans unité. Il correspond à un numéro de colonnes.
  • integer2 est un nombre entier positif, sans unité, qui correspond à un nombre de colonnes.
  • id est un identifiant de plage (ligne ou colonne), préalablement défini par la propriété grid-template-areas.

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.

grid-row est une propriété résumée 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.

grid-column est une propriété résumée 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, o

Pour chacune des propriétés grid-row et grid-column, il est donc possible de spécifier deux valeurs, qui correspondent aux propriétés détaillées. Ces deux valeurs devront être séparées par un slash ( / ).

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

Avec le mot span la valeur indiquée n'est plus un numéro de ligne ou de colonne, mais un nombre de lignes ou de colonnes sur lesquelles l'élément ciblé doit s'étendre.

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;

Si des noms de plages ont été définis sur la grille par la propriété , ces noms peuvent être utilisés à la place des numéros de ligne et de colonne.

Pour une information plus générale sur les conteneur grille reportez-vous à notre tutoriel sur les grilles.

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.

Syntaxes pour grid-row et grid-column.

  • grid-row: auto; grid-column: auto;

    Les éléments se positionnent automatiquement, les uns à la suite des autres, en revenant sur une nouvelle ligne lorsque c'est nécessaire. Cela suppose que le nombre de colonnes et/ou de lignes ont été définis par grid-template-columns et grid-template-rows.

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

    Lorsqu'une seule valeur est indiquée pour grid-row ou grid-column, l'élément se positionne sur cette ligne et cette colonne, et n'est pas étendu sur plusieurs lignes ni plusieurs colonnes.

    Les valeurs indiquées doivent être des nombres entiers supérieurs ou égaux à 1 (puisque la numérotation commence à 1).

    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, même si cela génère des lignes ou des colonnes vides.

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

    Lorsque deux nombres sont indiqués, l'élément ciblé débutera la première ligne ou colonne indiquée, et s'étendra jusqu'à buter sur la deuxième ligne ou colonne indiquée.

    Les deux valeurs doivent être séparées par une barre oblique ( / ) et être des nombres supérieurs ou égaux à 1.

    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 8. Il couvre donc trois colonnes, de la colonne 5 à la colonne 7.

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

    Avec le mot span le nombre indiqué correspond à un nombre de lignes ou de colonnes sur lesquelles l'élément doit s'étendre.

    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).

  • grid-row: b-end; grid-column: c-end;

    Lorsque des plages ont été nommées sur la grille, ces noms peuvent être utilisés pour positionner les éléments. Reportez-vous à la propriété grid-template-areas pour découvrir comment nommer des plages.

    Sur la grille, quatre plages ont été nommées a, b, c et d. Elles sont matérialisées sur le schéma ci-dessous par des couleurs différents. Du même coup, les lignes et les colonnes de début et de fin de plage ont été nommées également : a-start, a-end, b-start, b-end,etc.

    Tous ces noms peuvent être utilisés à la place des numéros avec grid-row et grid-column pour positionner un élément dans la grille.
    L'élément bleu a été positionné par grid-row:d-start; grid-column:d-start;
    On aurait obtenu le même résultat avec grid-row:b-end; grid-column:c-end;

    Lorsque des plages ont été nommées, le positionnement des éléments dans la grille est encore plus facile avec la propriété grid-area.

Valeurs communes :

grid-row: initial (auto) grid-row: inherit grid-row: revert grid-row: revertLayer grid-row: unset
grid-row-start: initial (auto) grid-row-start: inherit grid-row-start: revert grid-row-start: revertLayer grid-row-start: unset
grid-row-end: initial (auto) grid-row-end: inherit grid-row-end: revert grid-row-end: revertLayer grid-row-end: unset
grid-column: initial (auto) grid-column: inherit grid-column: revert grid-column: revertLayer grid-column: unset
grid-column-start: initial (auto) grid-column-start: inherit grid-column-start: revert grid-column-start: revertLayer grid-column-start: unset
grid-column-end: initial (auto) grid-column-end: inherit grid-column-end: revert grid-column-end: revertLayer grid-column-end: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Simulateur avec la propriété grid-row.

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

Vous pouvez saisir des numéros de lignes ou de colonnes qui n'existent pas encore : elles seront créées.

grid-column :
grid-row :
1
2
3
4
5
6
7
8
9
10
11
12

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement bonne.

Bien entendu, sauf pour l'ancien navigateur Internet explorer, qui reconnaît des syntaxes différentes pour les propriétés relatives aux grilles. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité avec IE.

1
Propriété
grid-row
2
Propriété
grid-column
Estimation de la prise en charge globale.
93%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la propriété grid-row.

Voir aussi ces autres notions.

Tous ces termes sont définis dans la spécification W3C concernant les grilles.

Propriétés :

grid
Propriété résumée 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
Définit la largeur par défaut des colonnes dans une grille.
grid-auto-flow
Définit le mode de calcul automatique pour positionner les éléments dans la grille.
grid-auto-rows
Définit la hauteur par défaut des lignes dans une grille.
grid-column
Numéro(s) de(s) colonne(s) où doit se positionner cet élément dans la grille.
grid-column-end
Numéro de la colonne sur laquelle un élément doit venir se terminer (dans une grille).
grid-column-start
Numéro de la colonne sur laquelle doit commencer un élément dans une grille.
grid-row-end
Numéro de la ligne sur laquelle un élément doit venir se terminer (dans une grille).
grid-row-start
Numéro de la ligne sur laquelle doit commencer un élément dans une grille.
grid-template
Propriété résumée pour définir les largeurs de colonnes, la hauteur des lignes, et les plages d'une grille.
grid-template-areas
Définit les zones nommées dans une grille.
grid-template-columns
Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows
Définit le nombre et la hauteur des lignes d'une grille.

Fonctions :

minmax()
Renvoie une valeur comprise dans une fourchette, pour dimensionner la hauteur des lignes ou la largeur des colonnes d'une grille.
repeat()
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.