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 - Propriété CSS

grid

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

Description rapide
Propriété raccourcis définissant les principaux paramètres d'une grille.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Valeurs prédéfinies
none
Pourcentages
Voir les propriétés individuelles.
Valeur initiale
none
Héritée par défaut
Voir les propriétés individuelles.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

Introduction.

Les grilles sont un outil particulièrement puissant pour construire des mises en page complexes en CSS. La nécessité que les 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.

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

Tutoriel : 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 aussi bien en HTML que en CSS.

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

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%;

Remarque : on peut souvent se dispenser de définir les lignes. Dans ce cas, la hauteur des lignes sera calculée en fonction de leur contenu, et le nombre de lignes sera déterminé en fonction du nombre d'éléments dans la grille, compte tenu du nombre de colonnes.

L'exemple ci-dessous définit des lignes de hauteurs différentes et des colonnes de largeurs différentes.

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

Lorsque de nombreuses lignes ou colonnes doivent être définies avec une dimension identique, il est plus pratique d'utiliser la fonction repeat(). L'exemple ci-dessous définit 20 colonnes de 30 pixels chacune :

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

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

Emplacement des éléments dans la grille.

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

Il est tout à fait possible de mixer des éléments dont la position est forcée, avec des éléments sans indication de position. Ces derniers occuperont alors les emplacements laissés libres.

Certains éléments peuvent s'étendre sur plusieurs lignes ou plusieurs colonnes. C'est le as de l'élément numéro 8, en vert sur l'exemple. Cela se définit avec les mêmes propriétés.

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

Alignement des éléments dans la grille.

Un conteneur 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 justify-content pour les colonnes et align-content 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 justify-items et align-items.

Ces quatre propriétés s'appliquent au container de la grille, et sont donc valables pour tous les éléments de la grille. Mais il est possible d'aligner les éléments individuellement avec les propriétés justify-self et align-self. Ces deux propriétés sont les seules qui s'appliquent à un élément de la grille, et non pas au conteneur.

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

Les différences entre toutes ces propriétés ne sont pas toujours claires. Voici quelques principes pour vous y retrouver :

  • Les propriétés dont le nom commence par justify agissent sur l'alignement suivant l'axe des lignes (la plupart du temps, pour les langues latines, il s'agit de l'axe horizontal), tandis que les propriétés dont le nom commence par align agissent sur l'alignement suivant l'axe des blocs (l'axe vertical pour les langues latines).
  • Les propriétés content agissent sur l'alignement des cellules dans le conteneur grille, tandis que les propriétés items agissent sur les éléments contenus dans chacune des cellules de la grille.
    Par défaut, les éléments emplissent toute leur cellule, ce qui fait que la différence entre les content et les items n'est pas toujours visible.
  • Les propriétés self agissent sur l'alignement d'un seul des éléments de la grille.

Alignement et répartition des éléments dans une grille
Action des propriétés d'alignement dans une grille

Voici un exemple. Les quatre colonnes ont été définies avec une largeur de 15%, ce qui laisse beaucoup de place disponible sur la largeur totale de la grille. On a demandé avec justify-content que ces colonnes se groupent sur le côté gauche du container (start).
Par défaut les éléments occupent toute la place de leur cellule. On ne voit donc pas de différence entre les cellules et les éléments qu'elles contiennent.

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

Voici maintenant une variante : la largeur et l'alignement des colonnes sont identiques à l'exemple précédent, mais en plus, on a demandé avec justify-items que les éléments se positionnent sur la droite de leur cellule (valeur end).

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

Enfin, sur ce troisième exemple, l'un des éléments a été aligné au centre de sa colonne. Il est bien visible car son arrière-plan a été colorié en bleu.

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

Espacements entre les lignes et entre les colonnes.

Dans tous les exemples précédents, les lignes et les colonnes se touchent : il n'y a pas d'espace entre. On peut cependant facilement réserver un espace entre lignes ou colonnes avec les propriétés row-gap, column-gap ou la propriété raccourcie gap.

Lorsqu'un espace est prévu entre les lignes ou les colonnes, les calculs en pourcentages ne sont plus valides : ils provoquent un débordement de la dernière ligne ou colonne à l'extérieur du container. Pour éviter ce problème il est vivement conseillé d'utiliser l'unité fr.

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

Définition de plages dans une grille.

Cette technique un peu différente consiste à définir des plages dans la grille. Chacune des plages peut couvrir un nombre quelconque de cellules, tant que la forme de la plage reste rectangulaire. Les éléments peuvent ensuite être positionnés chacun dans une des plages de la grille. La principale propriété à connaître pour la définition des plages est grid-template-areas.

Les sous-grilles.

La notion de sous-grille (subgrid) concerne, comme son nom l'indique, un container grille inclus dans un autre container grille.
Cette notion a été introduite dans le niveau 2 du module css-grid.

L'exemple ci-dessous montre un container grille (en blanc) composé de 5 lignes et 5 colonnes. Un autre container grille (en bleu) est inséré dans la première grille, et plus précisément dans un groupe de six cellules, s'étendant de la colonne 2 à la colonne 4, et de la ligne 2 à la ligne 3.

Exemple de sous-grille

Chacune de ces grilles gère la largeur de ses colonnes et la hauteur de ses lignes séparément. Il sera donc difficile d'aligner les colonnes de la sous-grille sur celles de la grille principale, particulièrement si des valeurs calculées sont utilisées (min-content, fit-content, etc.). Autrement dit il sera difficile d'obtenir la disposition ci-dessous.

Exemple de sous-grille

La spécification css-grid - Level 2 propose une solution facile pour résoudre ce problème. Elle consiste à appliquer la valeur subgrid aux propriétés grid-template-columns et/ou grid-template-rows de la sous-grille. La valeur subgrid a pour effet d'aligner les colonnes ou les lignes de la sous-grille sur celles de la grille principale.

Cette fonctionnalité commence à être prise en charge à l'heure actuelle. Si votre navigateur est compatible, vous devriez voir ci-dessous les colonnes et les lignes de la sous-grille s'aligner sur celles de la grille principale.

Particularités.

Les marges intérieures (padding) et les espaces entre les colonnes (gap) doivent également être pris en compte dans l'alignement des colonnes et des lignes. Dans notre exemple les marges intérieures définies sur les cellules des grilles réduisent d'autant les dimensions des cellules en bordure de la sous-grille. Mais toutes les cellules ne sont pas impactées de la même façon : par exemple les largeurs des cellules 2 et 5 de la sous-grille ne sont pas modifiées par les marges intérieures.

Pour que l'alignement soit possible, la sous-grille doit contenir autant de cellules qu'elle en occupe dans la grille principale. Dans notre exemple, 6 cellules. Si la sous-grille contient trop de cellules, les cellules excédentaires ne seront pas affichées ou se superposeront à d'autres cellules.

Les espaces entre les cellules (gap) de la grille principale sont hérités par la sous-grille, sauf ci cette dernière comporte elle même une définition pour ces espaces.

Les noms de lignes ou de colonnes qui sont définis que la grille principale sont également transmis à la sous-grille. Mais il est possible de définir des noms spécifiques à la sous-grille avec la syntaxe ci-dessous :

grid-template-columns: subgrid [nom1] [nom2] [nom3]...; grid-template-rows: subgrid [nom1] [nom2] [nom3]...;

Un exemple d'utilisation des sous-grilles.

Il est assez fréquent que l'on ait besoin d'inclure une grille dans une autre grille. Imaginons un site qui présente des produits, en l’occurrence des stages de formation. Pour chaque produit, on affiche un logo, un titre, une courte description, la durée et le prix. Ces informations sont organisées sous la forme d'une grille.

CSS
Niveau 1


Apprenez les bases d'un langage de mise en forme actuellement le plus courant et le plus puissant.
2 jours
600€

Maintenant, si on souhaite afficher plusieurs produits sur une même page (le catalogue), le plus pratique est d'insérer chacun des blocs dans une grille. On obtient alors cela le résultat ci-dessous. L'esthétique est critiquable car, si la grille principale a normaliser la hauteur de chacun des blocs, l'intérieur des blocs n'est pas standardisé. Par exemple les traits horizontaux ne sont pas à la même hauteur, et il en est de même pour les prix.

Résultat sans sous-grille

En utilisant la notion de sous-grille, il est facile d'insérer les blocs dans une grille de trois lignes et de synchroniser la hauteur des lignes des sous-grilles sur la grille principale. L'exemple ci-dessous est une simulation (image) car certains navigateurs traitent pas encore les sous-grilles.

Résultat avec des sous-grilles

Compatibilité des grilles avec les navigateurs.

Les grilles sont maintenant bien gérées par tous les navigateurs actuels.

La notion de sous-grilles a été ajoutée dans la spécification "Grid Layout" niveau 2. Une sous-grille est une grille elle-même incluse dans un container du type grille, et dont on souhaite aligner les colonnes ou les lignes sur la grille parente.

Colonne 1
Prise en charge des conteneurs grille.
Colonne 2
Support des sous-grilles : la possibilité d'imbriquer des conteneurs grille en faisant correspondre lignes et colonnes (voir plus haut).
1
Grid
2
Sub˗grid
Estimation de la prise en charge en pourcentage du parc actuel.
95%
13%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Cas particulier du navigateur Internet Explorer.

Nous conservons ce chapitre en ligne, bien que Internet Explorer   ne soit plus utilisé.

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, dans le même module de standardisation que grid.

Les spécifications CSS éditées par le W3C sont organisées en modules. grid 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.

Propriétés.

Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.