grid-row et grid-column
Résumé des caractéristiques de la propriété grid-row
auto
| span
auto
grid-row
passe d'une valeur à l'autre sans transition.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
.
integer1
est une valeur numérique entière supérieure ou égale à 1 : un numéro de ligne.integer2
est également une valeur numérique entière supérieure ou égale à 1 mais qui représente un nombre de lignesid
est un identifiant de plage, préalablement défini par la propriétégrid-template-areas
.
Cette syntaxe peut être répétée une ou deux fois, en séparant les occurrences par un caractère slash ( /
).
Le schéma a été construit pour la propriété grid-row
; la syntaxe de est exactement identique.
- 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
etgrid-template-rows
. - grid-row: 2; grid-column: 5;
Lorsqu'une seule valeur est indiquée pour
grid-row
ougrid-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
etd
. 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
etgrid-column
pour positionner un élément dans la grille.
L'élément bleu a été positionné pargrid-row:d-start; grid-column:d-start;
On aurait obtenu le même résultat avecgrid-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
. La valeur initiale est :
.auto
Simulateur.
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.
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.
grid-row
grid-column
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que grid-row
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-row
fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.