grid - Propriété CSS
Résumé des caractéristiques de la propriété grid
none
none
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 :
grid-template-rows
: définition du nombre et et de la hauteur des lignes de la grille.grid-template-columns
: définition du nombre et de la largeur des colonnes de la grille.grid-template-areas
: définition de zones nommées dans la grille.grid-auto-rows
: définition de la hauteur par défaut des lignes de la grille.grid-auto-columns
: définition de la largeur par défaut des colonnes de la grille.grid-auto-flow
: définition du mode de remplissage de la grille.
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
etpied
. 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.
1234567891011121314 - 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.
1234567891011121314
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.
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.
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
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 paralign
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ésitems
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 lescontent
et lesitems
n'est pas toujours visible. - Les propriétés
self
agissent 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.
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.
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
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
grid-templates-areas
grid-auto-flow
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.