Grid - Propriété CSS
Résumé des caractéristiques de la propriété grid
nonenoneIntroduction.
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.
Pour définir une grille, utilisez la propriété display :
display: grid;
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 Valeurs 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: 'titles titles titles titles' 20px 'middle middle middle right' 40px 'foot1 foot2 foot3 right' 20px / 1fr 1fr 1fr 2fr;
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,droiteetpied. 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-areaspour des explications plus précises sur les zones nommées dans une grille. - grid: 30px 50px 20px / auto-flow 25px 40px;
La valeur
auto-flowdans 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.
1234567891011121314 - grid: auto-flow 20px / 50px 50px 30px;
La valeur
auto-flowest 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 30 pixels.
1234567891011121314
Tutoriel : présentation des grilles.
Table des matières.
- Construction d'une grille.
- Dimensionnement des lignes et des colonnes de la grille.
- Dénombrer les lignes ou les colonnes :
auto-fillouauto-fit. - Emplacement des éléments dans la grille.
- Alignement des éléments dans la grille.
- Espacement entre les lignes ou les colonnes.
- Définition de plages dans une grille.
- Les sous-grilles.
- Les grilles de type maçonnerie.
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.
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.
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.
Dénombrer les lignes ou les colonnes : auto-fill ou auto-fit.
Lorsque le nombre de colonnes n'est pas connu, il est possible d'utiliser auto-fill avec repeat().
Cette valeur calcule le nombre de colonnes qui tiennent dans la largeur de la grille.
grid-template-columns: repeat(auto-fill, 100px);
auto-fit joue le même rôle que auto-fill mais en plus, les colonnes ou les lignes qui se retrouvent vides après
le positionnement des éléments, voient leur largeur ou leur hauteur ramenée à 0.
Reportez vous à la fonction repeat() pour plus de renseignements sur ces deux valeurs.
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.
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
justifyagissent 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 paralignagissent sur l'alignement suivant l'axe des blocs (l'axe vertical pour les langues latines). - Les propriétés
contentagissent sur l'alignement des cellules dans le conteneur grille, tandis que les propriétésitemsagissent 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 lescontentet lesitemsn'est pas toujours visible. - Les propriétés
selfagissent sur l'alignement d'un seul des éléments de la 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.
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).
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.
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.
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.
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.
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.
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.
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.
Les grilles de type maçonnerie (masonry).
Pour définir une grille de ce type, vous devez utiliser display:masonry;. La spécification prévoit plutôt d'utiliser display:grid-lanes;
mais, pour l'instant, les navigateurs ont implémenté masonry.
Cette possibilité est prévue dans le niveau 3 de la spécification module CSS - Mise en page par grille. Elle est pour l'instant implémentée dans les navigateur mais il faut l'activer :
- Rendez vous à l'adresse
about://flagssur un navigateur Webkit, ou àabout://configsur Firefox. - Cherchez dans la zone de recherche
masonry. - Positionnez le flag
CSS.masonry.layoutàenabled.
Une fois que vous avez défini l'élément comme étant un grille masonry, il faut encore définir la largeur des colonnes ou la hauteur des lignes,
avec les propriétés grid-template-columns ou grid-template-rows. Ne définissez pas les deux, les cellules des grilles masonry ont
leur largeur ou leur hauteur définie, jamais les deux (sinon c'est une grille normale).
Elles prennent l'aspect de construction par rangées ou par colonnes. Elles sont similaires aux constructions avec des briques irrégulières en largeur,
d'où leur nom de "maçonnerie". Dans l'autre sens une bonne analogie est des voitures de longueurs différentes qui se suivent dans leur voie.
La propriété masonry-direction si ce sont les lignes ou les colonnes qui sont figées.
Exemple d'une grille masonry sur les colonnes.
Définir
grid-template-rows.
Exemple d'une grille masonry sur les lignes.
Définir
grid-template-columns.
La plupart des propriétés relatives aux grilles s'appliquent également aux grilles maçonnerie. C'est le cas par exemple des propriétés grid-column
et grid-row pour positonner un élément à un endroit précis de la grille, ou même le faire chevaucher plusieurs lignes ou colonnes.
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.
Les grilles masonry sont encore très peu reconnues. Firefox 
propose cette possibilité en expérimental avec le flag
layout.css.grid-template-masonry-value.enabled qu'il faut positionner sur true (accéder aux flags sur Firefox).
fr.Remarques :
(1) Avec le préfixe du navigateur. Support partiel car Internet Explorer suit une ancienne spécification.
(2) Désactivé sur Firefox, peut être activé en positionnant le flag layout.css.grid-template-masonry-value.enabled à true.
en grille
grille
masonry
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
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;Vous devez utiliser
-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 Internet Explorer : 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-gapgrid-templates-areasgrid-auto-flowHistorique de la propriété grid.
-
Module CSS - Mise en page par grille - Niveau 1
Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.Concernantgrid. Première définition de tous les principes des mises en page avec grille.
Introduction de la propriétégrid.
07 Avril 2011Document de travail.
29 Septembre 2016Candidat à la recommandation.
-
Module CSS - Mise en page par grille - Niveau 2
Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.
Concernantgrid. Pas de changement concernant spécifiquement la propriétégrid.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Mise en page par grille - Niveau 3
Le niveau 3 de la spécification introduit une nouvelle notion : les grilles maçonnerie. Il s'agit de grilles dont seules les colonnes ou les lignes sont figées, l'autre dimension pouvant évoluer en fonction de la taille des éléments contenus. Ceci a nécessité l'ajout de plusieurs propriétés.
Concernantgrid. Pas de changement sur la propriétégridelle-même.
Le niveau 3 introduit surtout les grilles du type "Maçonnerie" (masonry).19 Septembre 2024Document de travail.
Autre propriétés ou fonctions concernant les grilles.
Les spécifications concernant les grilles et les propriétés associées sont regroupées dans le document "module CSS - Mise en page par grille" (module CSS - Mise en page par grille).