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 :

CSS - Propriété grid

Les grilles sont un outil particulièrement puissant pour construire des mises en page complexes en CSS. La nécessité que ces mises en page s'adaptent à des tailles d'écran de plus en plus différentes (depuis le téléphone portable jusqu'au grand écran d'un téléviseur) est également satisfaite par les grilles.

Cette page est une description de la propriété raccourcie grid mais également une présentation générale du fonctionnement et des possibilités des grilles.

Sommaire :

Description de la propriété grid.

grid est une propriété raccourcie permettant de définir plusieurs autres propriétés relatives aux grilles :

Exemples de syntaxes pour grid.

La propriété grid regroupe les valeurs des nombreuses propriétés individuelles listées ci-dessus. Reportez-vous à ces dernières pour une description plus précise de la syntaxe.

  • grid: 40px 25px / 1fr 2fr 1fr 2fr;

    Un premier exemple de syntaxe. Deux lignes sont définies, avec une hauteur de 40 pixels pour la première et de 25 pixels pour la deuxième. Après la barre oblique (/) on trouve la définition de quatre colonnes avec leur largeur respective.

    Remarque : l'unité relative fr (abréviation de "fraction de") est particulièrement adaptée au dimensionnement des colonnes ou des lignes d'une grille.

  • grid: 'titres titres titres titres' 20px 'milieu milieu milieu droite' 40px 'pied1 pied2 pied3 droite' 20px / 20% 20% 20% 40%;

    Ce deuxième exemple définit quatre zones nommées, en plus de trois lignes et de quatre colonnes. Ces zones ont reçu les noms titres, milieu, droite et pied. La barre oblique joue toujours le rôle de séparateur entre la définition des lignes et celle des colonnes.

    Reportez-vous à la propriété grid-template-areas pour des explications plus précises sur les zones nommées dans une grille.

  • grid: 30px 50px 20px / auto-flow 25px 40px;

    La valeur auto-flow dans la section des colonnes (après la barre oblique) indique un remplissage colonne par colonne (donc dans le sens vertical). La section des lignes (avant la barre oblique) spécifie trois lignes, avec leur hauteur.

    Les quatorze cellules de la grille se répartissent sur cinq colonnes, puisque le nombre de lignes est fixé à trois. La largeur de ces colonnes est alternativement 25 pixels et 40 pixels.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
  • grid: auto-flow 20px / 50px 50px 30px;

    La valeur auto-flow est cette fois-ci dans la section des lignes (avant la barre oblique). Elle indique un remplissage ligne par ligne (donc horizontalement). Trois colonnes sont spécifiées après la barre oblique, avec une largeur de 50 pixels pour les deux premières et de 30 pixels pour la dernière.

    Les quatorze cellules de la grille se répartissent sur cinq lignes, puisque le nombre de colonnes est fixé à trois. La hauteur de toutes ces lignes est de 20 pixels.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

Présentation des grilles.

Construction d'une grille.

Une grille est composée d'un container , qui reçoit la propriété display:grid et d'éléments enfants. La plupart des propriétés se définissent sur le container : largeurs et nombre de colonnes, positionnement des éléments, etc.

Utilisez les boutons pour constater à quel point la mise en place de la grille ci-dessous nécessite peu de code (sauf pour Internet Explorer qui demande de positionner les éléments un par un sur une ligne et une colonne).

1
2
3
4
5
6
7
8
9
10
11
12

Dimensionnement des lignes et des colonnes de la grille.

Les lignes et les colonnes d'une grille peuvent être crées et dimensionnées en une seule fois avec les propriétés grid-template-rows et grid-template-columns, appliquées sur le container.

Ces deux propriétés attendent une série de valeurs séparées par des espaces. Chacune des valeurs définit la hauteur d'une ligne ou la largeur d'une colonne. Et le nombre de valeurs définit le nombre de lignes ou de colonnes.

Exemple : voici comment définir une grille comportant 3 lignes de 100 pixels de hauteur chacune. Cette grille comportera également 4 colonnes occupant chacune un quart de la largeur totale de la grille.

grid template-rows:100px 100px 100px; grid-template-columns:25% 25% 25% 25%;

Lorsque de nombreuses lignes ou colonnes doivent être définies avec une dimension identique, il est plus pratique d'utiliser la fonction repeat(). Attention, cette fonction n'est toutefois pas reconnue par Internet Explorer.

grid-template-columns: repeat(20,30px);

Il est souvent pratique aussi d'utiliser l'unité fr (fraction) qui permet de répartir l'espace entre les colonnes ou les lignes, en s'assurant que ces dernière occupent bien tout l'espace disponible.

A partir du moment où le nombre de colonnes est défini, les éléments se placent automatiquement dans la première cellule disponible mais il est possible de forcer leur position avec les propriétés grid-row et grid-column.

Positionnement des éléments dans la grille.

Une container grille est composé de lignes et de colonnes. A chaque intersection d'une ligne et d'une colonne se trouve une cellule, qui peut contenir un élément.

Les lignes et les colonnes peuvent être disposées sur la grille de plusieurs façons : on peut les centrer, les grouper d'un côté, ou les répartir sur la place disponible. Voir les propriétés Object pour les colonnes et Object pour les lignes.

Par défaut, les éléments contenus dans la grille emplissent toute leur cellule, ce qui dispense de les aligner mais, dans le cas contraire, il est possible de positionner les éléments dans leur cellule avec les propriétés Object et Object.

Enfin il est possible d'aligner les éléments individuellement avec les propriétés Object et Object. Ces deux propriétés sont les seules qui s'appliquent à un élément de la grille, toutes les précédentes s'appliquent au container.

Tout ceci est résumé dans le schéma ci-dessous :

  • justify-content : disposition et répartition des colonnes sur la largeur de la grille.
  • align-content : disposition et répartition des lignes sur la hauteur de la grille.
  • justify-items : alignement horizontal des éléments dans leur cellule.
  • align-items : alignement vertical des éléments dans leur cellule.
  • justify-self : alignement horizontal de un des éléments en particulier par rapport à sa cellule.
  • align-self : alignement vertical de l'un des éléments en particulier dans leur cellule.

Position et répartition des éléments dans une grille

Prise en charge par les navigateurs (compatibilité).

Les fonctionnalités de mise en page à partir de grilles sont diversement prises en charge. Le navigateur qui pose le plus de problèmes est Internet Explorer. Voici les équivalences entre les syntaxes standards et celles qui devront être ajoutées pour obtenir une restitution correcte avec Internet Explorer.

display:grid;
display:-ms-grid;
grid-template-columns:repeat(4,auto);
-ms-grid-columns:25% 25% 25% 25%;
La fonction repeat() n'est pas reconnue par IE : répétez la valeur autant de fois qu'il y a de colonnes.
D'autre part, la valeur auto n'est pas traitée de la même façon que sur les autres navigateurs : pour occuper toute la largeur de la grille, utilisez des pourcentages ou l'unité fr.
grid-template-rows:repeat(4,25vh);
-ms-grid-rows:25vh 25vh 25vh 25vh;
Mêmes remarques que ci-dessus : n'utilisez pas repeat(), énumérez les valeurs.
grid-row:1;
grid-column:3;
-ms-grid-row:1; -ms-grid-colum:3;

Le placement automatique n'est pas pris en charge par IE : vous devrez positionner toutes les cellules de la grille, alors que c'est optionnel dans la version standardisée.
grid-row:1/3;
grid-column:2/6;
-ms-grid-row:1; -ms-grid-row-span:2;
-ms-grid-colum:2; -ms-grid-column-span:4;


La notation première/dernière n'est pas reconnue. Utilisez à la place les propriétés -ms-grid...span pour indiquer sur combien de lignes ou de colonnes la cellule doit s'étendre.
grid-row-start:1; grid-row-end:3;
grid-column-start:2; grid-column-end:6;
-ms-grid-row:1; -ms-grid-row-span:2;
-ms-grid-colum:2; -ms-grid-column-span:4;


Même remarque que ci-dessus : utilisez les propriétés -ms-grid...span pour étendre les cellules sur plusieurs lignes ou plusieurs colonnes.
grid-gap
L'espace entre les cellules (gap) n'est pas pris en charge par IE. Il est possible de le simuler en insérant des lignes ou des colonnes vides.
grid-templates-areas
Les zones nommées ne sont pas prises en charge par IE : positionner individuellement toutes les cellules sur leur ligne et leur colonne.
grid-auto-flow
Le placement automatique n'est pas géré par IE : les cellules doivent toutes être positionnées sur leur ligne et leur colonne. Il n'y a pas d'équivalent.

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-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 : Numéro des lignes d'un élément 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.