Il existe bien des façons d’aligner les choses en CSS et il n’est pas toujours évident de faire un choix. Connaître les options qui s’offrent à nous est encore la meilleure façon de concevoir les meilleures solutions pour résoudre un problème.
Comme souvent en CSS, le plus important est de comprendre les fondamentaux des méthodes, le reste est affaire de détails.
Alignement du texte et des éléments inline
Alignement horizontal des éléments inline
La propriété text-align appliquée sur un des éléments parents alignera ce contenu dans son conteneur.
Alignement vertical des éléments inline
On peut utiliser vertical-align: middle sur l’image pour aligner le texte par rapport au milieu de l’image
<p>A string of text <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/purple-square.png"></p>
p {
border: 2px solid #ccc;
font-size: 15px;
line-height: 4;
}
img {
vertical-align: middle;
}
La propriété vertical-align est utile pour aligner les éléments inline. Cela comprend aussi les éléments affichés avec display: inline-block. Le contenu des cellules de tableaux peut également être aligné avec cette propriété.
La propriété vertical-align n’a aucun effet sur les items flex ou grid et par conséquent elle cessera d’être effective dès lors que l’élément parent sera transformé en conteneur flex ou grid.
La propriété line-height
La propriété line-height modifie la hauteur de la boîte.
p {
border: 2px solid #ccc;
font-size: 15px;
line-height: 150px;
}
Si vous souhaitez comprendre le détail de cette propriété, je vous recommande la lecture de CSS avancé : métrique des fontes, line height et vertical align par Vincent de Oliveira.
Nous avons maintenant de meilleures méthodes pour aligner les boîtes en CSS (voir ci-dessous), nous n’avons plus besoin de recourir aux propriétés vertical-align et text-align ailleurs que là où elles remplissent leur fonction initiale, à savoir avec les éléments inline et textuels. Sur ces formats, elles demeurent parfaitement valides — par conséquent si vous souhaitez aligner des éléments inline ce sont elles, et non l’alignement de boîte, qu’il convient d’utiliser.
Alignement de boîte : CSS Grid Layout
CSS Grid Layout (aka “Grid”) est un système de layout bi-dimensionnel basé sur les grilles qui a pour ambition ni plus ni moins que de révolutionner la façon dont nous concevons les interfaces utilisateurs basées sur des grilles.
CSS a toujours été utilisé pour la mise en page web, mais il n’a jamais été très bon pour cela. Nous avons d’abord utilisé des tables, puis des floats, divers positionnements et inline-block, mais toutes ces méthodes s’apparentaient fondamentalement à des rustines, et ne permettaient pas de résoudre certains problèmes récurrents comme le centrage vertical.
Grid est le premier module CSS créé spécifiquement pour résoudre les problèmes de layout que nous avons contournés par des tripatouillages depuis que nous réalisons des sites web.
Les bases
Concept
Il est facile de se lancer dans Grid.
Il suffit de définir un élément container comme une grille, via la propriété display: grid, de régler les dimensions des colonnes et des rangées avec grid-template-columns et grid-template-rows et de placer ses éléments enfants dans la grille avec grid-column et grid-row.
L’ordre des items de la grille tel qu’il apparaît dans la source n’a pas d’importance. Votre CSS peut les placer dans n’importe quel ordre, ce qui facilite la réorganisation de votre grille avec les media queries.
Vous pouvez ainsi définir le layout de votre page et le réorganiser entièrement pour l’adapter à différentes tailles d’écrans, et tout cela avec juste quelques lignes de CSS.
Grid est un des modules CSS les plus puissants jamais proposés.
Terminologie
Container Grid
C’est l’élément sur lequel s’applique display: grid. C’est donc le parent direct de tous les items grid.
Dans cet exemple, container est le container grid.
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
Item Grid
L’enfant (c’est à dire le descendant direct) du container grid.
Ici, les éléments item sont des items grid, mais ce n’est pas le cas de sub-item.
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
Ligne de Grille
Les lignes qui divisent et constituent la structure de la grille.
Elles peuvent être verticales (“lignes de grille de colonnes”) ou horizontales (“lignes de grille de rangées”) et sont situées d’un côté ou de l’autre d’une rangée ou d’une colonne.
Ici, la ligne jaune est un exemple de ligne de grille de colonne (column grid line).
Piste de Grille
La piste (ou plage) de grille (grid track) est l’espace situé entre deux lignes de grille adjacentes, en d’autres termes ce sont les colonnes ou les rangées de la grille.
Ci-dessous, la piste de grille est située entre les deuxième et troisième lignes de rangée.
Cellule de Grille
La cellule de grille (grid cell) est l’espace situé entre deux lignes de grille adjacentes de rangée et deux lignes de grille adjacentes de colonne. C’est une “unité” de la grille.
Ci-dessous, la cellule de grille est entre les lignes de grille de rangée 1 & 2, et les lignes de grille de colonne 2 & 3. Dit autrement, une cellule est l’intersection d’une rangée et d’une colonne.
Zone de Grille
La zone de grille (grid area) est l’espace entouré par quatre lignes de grille. Une zone de grille peut comprendre n’importe quel nombre de cellules.
Voici la zone de grille entre les lignes de grille de rangée 1 & 3 et les lignes de grille de colonne 1 & 3.
Comprendre CSS Grid
Créer un container Grid
Grid, comme Flexbox, est une valeur de la propriété display. Par conséquent, pour indiquer au navigateur qu’on utilise la mise en page grid, on écrit display:grid dans le css de l’élément. Le navigateur nous donne une boîte de niveau block sur l’élément en question et tout enfant direct sera inclus dans le contexte de formatage grid. Ils se comporteront comme des items grid et non comme des éléments block ou inline normaux.
L’exemple qui suit montre deux éléments de niveau block et un texte contenant une span au milieu de la chaîne de caractères. On se retrouve avec cinq items grid :
- les deux éléments
div - la chaîne de caractères qui précède le
span - le
spanlui-même - la chaîne de caractères qui suit le
span
<div class="grid">
<div>Item one</div>
<div>Item Two</div>
A string of text with a <span>span element</span> in the middle.
</div>
This string of text follows the grid.
.grid {
border: 5px solid rgb(111,41,97);
display: grid;
width: 500px;
}
.grid > * {
background-color: rgba(111,41,97,.4);
border-radius: 5px;
padding: 10px;
}
Il est possible de créer une grille inline avec display: inline-grid ; dans ce cas, notre container devient une boîte de niveau inline. Les enfants directs sont toujours des items grid et se comportent comme les items grid à l’intérieur d’une boîte de niveau block (c’est seulement le type d’affichage extérieur).
L’exemple suivant montre une grille suivie d’une chaîne de caractères. Comme c’est une grille de niveau inline, le texte peut s’afficher à côté (les éléments de niveau inline ne s’étirent pas pour prendre toute la place dans la dimension inline, contrairement aux éléments de niveau block).
Colonnes et rangées
Pour obtenir quelque chose qui ressemble à une grille, nous aurons besoin d’ajouter des colonnes et des rangées. Pour cela on utilise les propriétés grid-template-columns et grid-template-rows.
Ces propriétés spécifient, sous forme d’une liste de pistes séparées par un espace, les noms des lignes et les fonctions de dimensionnement des pistes de la grille. La propriété grid-template-columns spécifie la liste de pistes pour les colonnes de la grille, tandis que grid-template-rows le fait pour les rangées.
A titre d’illustration, voici quelques valeurs de listes de pistes possibles :
grid-template-columns: 100px 100px 200px;crée une grille à trois colonnes: la première fait 100px de large, la deuxième aussi, la troisième fait 200px.grid-template-columns: min-content max-content fit-content(10em);crée une grille à trois colonnes, la première à la taillemin-content, la deuxième à la taillemax-content. La troisième est à la taillemax-contentsauf si le contenu est plus grand que 10em, auquel cas il est limité à 10em.grid-template-columns: 1fr 1fr 1fr;crée une grille à trois colonnes à l’aide de l’unitéfr. L’espace disponible dans le container grid est divisé en trois et partagé entre les trois colonnes.grid-template-columns: repeat(2, 10em 1fr);crée une grille de quatre colonnes selon un motif répété10em 1 fr 10em 1fr, la liste de pistes étant répétée deux fois.grid-template-columns: repeat(autofill 200px);remplit le container d’autant de colonnes de 200px que possible, et laisse un espace à la fin s’il reste de la place.grid-template-columns: repeat(autofill minmax(200px, 1fr));remplit le container d’autant de colonnes de 200px que possible, puis distribue l’espace restant de manière égale entre les colonnes.grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end];crée une grille de trois colonnes, la première et la troisième occupant une fraction de l’espace disponible et la troisième occupant trois fractions de l’espace disponible. Les lignes sont nommées en mettant leur nom entre crochets.
Comme vous pouvez le constater, il y a de nombreuses façons de créer une liste de pistes. Voyons maintenant comment tout cela fonctionne, en donnant quelques conseils d’utilisation.
Utilisation des unités de longueur
On peut utiliser n’importe quelle unité de longueur, ou un pourcentage, pour créer les pistes.
Si la dimension des pistes est inférieure à l’espace disponible dans le container, alors par défaut les pistes s’aligneront au début du container et l’espace sera à la fin. Ceci, parce que la valeur par défaut de align-content et de justify-content est start.
On peut aussi utiliser les mots-clés min-content, max-content et fit-content().
Avec min-content, on a une piste qui est aussi étroite que possible sans dépassement. Par conséquent, lorsqu’on l’utilise pour la largeur de la colonne, le contenu reviendra à la ligne à chaque fois que possible. La piste prend donc la dimension du mot le plus long de la colonne, ou du plus large élément de taille fixe.
Avec max-content, c’est l’inverse, le contenu ne reviendra pas à la ligne du tout. Dans une colonne, cela peut donc avoir pour conséquence un texte qui déborde.
Le mot-clé fit-content() quant à lui doit prendre une valeur, celle-ci devenant le maximum possible pour cette piste. La piste se comportera donc de la même façon que max-content jusqu’à rencontrer la valeur spécifiée. Arrivé à ce point, le contenu pourra revenir à la ligne sans déborder. Autrement dit, votre piste peut être plus petite que la valeur spécifiée, mais jamais plus grande.
L’unité fr
Grid Layout offre une méthode qui vous permettra d’éviter les calculs de pourcentages — le dimensionnement des pistes avec l’unité fr. Cette unité n’est pas une longueur et par conséquent ne peut pas être utilisée en combinaison avec calc(); c’est une unité flex qui représente l’espace disponible dans le container grid.
Autrement dit, avec une liste de pistes de 1fr 1fr 1fr l’espace disponible est divisé en trois et partagé de façon égale entre les pistes. Avec une liste de pistes de 2fr 1fr 1fr, l’espace disponible est divisé en quatre, deux parties sont données à la première piste et une partie à chacune des pistes deux et trois.
Un point auquel il faut être attentif est que ce qui est partagé par défaut, c’est l’espace disponible, qui n’est pas nécessairement l’espace total de notre container. Si une piste contient un élément de taille fixe ou un mot très long sans retour à la ligne, celle-ci sera mise en place avant le partage de l’espace restant.
Dans l’exemple qui suit, j’ai supprimé les espaces entre les mots de ItemThree, ce qui crée une chaîne de caractères sans retour à la ligne possible. La distribution de l’espace se fait après que les conditions d’affichage de cet item aient été calculées.
<div class="grid">
<div>Item One</div>
<div>Item Two Item Two</div>
<div>ItemThreeItemThreeItemThree</div>
<div>Item Four</div>
</div>
.grid {
border: 5px solid rgb(111,41,97);
display: grid;
grid-template-columns: 2fr 1fr 1fr;
width: 500px;
}
On peut aussi avoir un composant avec une piste réglée sur fit-content(300px) et l’autre sur 1fr. On a ainsi un composant qui accepte quelque chose d’inférieur à 300px dans la première piste, auquel cas il prend seulement l’espace nécessaire, et l’unité fr s’étend pour prendre le reste de l’espace disponible.
Si on ajoute quelque chose de plus grand (comme une image ayant une max-width: 100%), la première piste sera limitée à 300px et l’unité fr prendra le reste de l’espace. On crée des composant très flexibles en mélangeant l’unité fr et fit-content().
La fonction repeat()
La function repeat() peut vous épargner la saisie de valeurs identiques. Les deux lignes ci-dessous sont équivalentes :
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(12, 1fr);
La valeur avant la virgule représente le nombre de répétitions, la valeur après la virgule représente la liste de pistes qui doit être répété. On peut avoir un seul pattern (comme ci-dessus) ou des valeurs multiples. Enfin, on peut utiliser repeat() pour une partie d’une liste de pistes. Dans l’exemple ci-dessous, on aurait une piste 1fr, trois pistes 200px et une piste 1fr pour finir.
grid-template-columns: 1fr repeat(3, 200px) 1fr;
A la place d’un nombre avant la virgule, indiquant un nombre fixe de répétitions d’un pattern, on peut utiliser les mots-clés auto-fill ou auto-fit. Le container grid sera rempli par autant de pistes qu’il peut en contenir.
Si vous avez assez de contenu pour remplir la première rangée de cellules, celles-ci se comporteront exactement de la même manière. Si par contre vous n’avez pas assez de contenu (p.ex. si nous supprimons toutes les cellules sauf une dans le container précédent), alors elles se comporteront différemment.
auto-fill maintiendra le dimensionnement de la piste, même s’il n’y a pas de contenu pour la remplir.
En revanche, si on utilise auto-fit, les pistes vides seront fondues en une.
L’utilisation d’une unité de mesure fixe a pour effet que si le container ne peut être divisé exactement par cette taille, il restera de l’espace disponible.
Nous pouvons utiliser une autre fonction Grid pour transformer cette valeur fixe en minimum. La fonction minmax() prend une taille minimum et une taille maximum. Avec un minimum de 200px et un maximum de 1fr, nous avons autant des pistes de 200px que le container peut accepter et comme le maximum est 1fr, ce qui, nous le savons, va répartir l’espace de façon égale, l’espace en trop sera distribué entre les pistes.
Comprendre la dimension des boîtes Flexbox
La Cascade : CSS Flexbox et la dimension des boîtes
Grille explicite vs grille implicite
Lorsqu’on crée une grille avec grid-template-columns et grid-template-rows et une liste de pistes, on crée ce qu’on appelle une grille explicite. C’est la grille que vous avez définie, avec le dimensionnement que vous avez choisi pour chaque piste.
Si vous avez plus d’items qu’elle n’en peut contenir, ou si vous placez un item de telle manière qu’il tombe en dehors des limites de la grille, Grid créera des pistes dans ce qu’on appelle la grille implicite. Ces pistes implicites seront autodimensionnées par défaut. Nous avons déjà vu cette grille implicite en action lorsque j’ai déclaré display: grid dans l’élément parent et que grid a créé des rangées, une pour chaque item. Je n’avais pas défini ces rangées, mais puisqu’il y avait des items grid, les pistes de rangées ont été créées pour leur donner un endroit où aller.
On peut fixer une dimension pour les rangées ou colonnes implicites en utilisant les propriétés grid-auto-rows ou grid-auto-columns. Ces propriétés prennent une liste de pistes et si vous voulez que toutes les colonnes implicites aient ne hauteur d’au moins 200px mais qu’elles puissent s’agrandir s’il y a plus de contenu, vous pouvez écrire :
grid-auto-rows: minmax(200px, auto)
Vous pouvez aussi passer des valeurs multiples :
grid-auto-rows: auto 100px
Comment fonctionne minmax()
La fonction minmax() est l’une des plus utiles parmi les nouveautés introduites par la spécification CSS Grid Layout.
La fonction minmax() définit un espace supérieur ou égal à une valeur minimum et inférieur ou égal à une valeur maximum. Elle accepte deux paramètres, une valeur minimum et une valeur maximum.
minmax(min, max)
La fonction minmax() accepte six types de valeurs :
- longueur
- pourcentage
- longueur flexible
max-contentmin-contentauto
Longueur
La valeur la plus simple que nous puissions passer à minmax() est une longueur. Prenons par exemple cette grille simple, qui a trois colonnes et une rangée unique.
Avec la fonction minmax(), nous pouvons préciser que la cellule jaune doit avoir une largeur minimale de 100px et maximale de 200px. Lorsque l’écran est redimensionné, la valeur absolue change mais toujours entre ces deux limites.
.grid {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
Les deuxième et troisième colonnes se rétrécissent ou s’agrandissent pour occuper l’espace disponible de manière égale, mais la première aura toujours une largeur comprise entre 100 et 200px.
Pourcentage
Nous pouvons également utiliser les pourcentages. Admettons que nous voulions donner à notre cellule jaune une largeur minimale de 200px, pouvant aller jusqu’à 50% de la largeur de la grille.
.grid {
display: grid;
grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
Nous pouvons réduire la largeur de l’écran autant que nous voulons, la largeur de la cellule jaune ne sera jamais inférieure à 200px. Par contre, lorsque l’espace le permet, elle s’agrandit jusqu’à atteindre la moitié de la largeur de la grille.
Longueur flexible
La longueur flexible, qui utilise l’unité fr, est une nouvelle unité introduite par la spécification CSS Grid Layout. Cette longueur représente une fraction de l’espace disponible dans la grille container (container grid). Par exemple, si nous avons une grille de 100px de large, avec deux colonnes, l’une ayant une largeur fixe de 20px et l’autre une largeur de 1fr, cette dernière aura du coup une dimension de 80px puisqu’elle prend l’espace disponible dans la grille.
.grid {
display: grid;
grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
Les colonnes ont toutes une dimension de 1fr dans les écrans larges, elles occupent donc le même espace dans la grille.
max-content
Le mot-clé max-content est une valeur particulière qui représente la « taille idéale » de la cellule. C’est la dimension minimale pour que le contenu de la cellule tienne sans encombre. Par exemple, si le contenu de la cellule est une phrase, la largeur idéale de la cellule sera celle qui permet à la phrase de tenir entièrement, sans retour à la ligne. Reprenons notre exemple précédent et précisons que la cellule jaune doit être à la fois un minimum et un maximum de max-content.
.grid {
display: grid;
grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
Comme on peut le voir, la colonne s’étend jusqu’à ce que la phrase tienne entièrement. Comme la minimale et la maximale ont pour valeur max-content, la largeur de la colonne reste toujours identique.
min-content
Le mot-clé min-content est elle aussi une valeur particulière. Elle représente la plus petite dimension telle que le contenu ne déborde pas — sauf si ce débordement est inévitable. Pour illustrer la différence entre min-content et max-content, nous pouvons utiliser le même contenu que dans l’exemple précédent mais avec les minimale et maximale égales à min-content :
.grid {
display: grid;
grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
On voit que le contenu de la cellule est disposé de façon à occuper le moins d’espace horizontal possible sans déborder de la cellule.
auto
Enfin, nous avons auto. Cette dernière valeur a une signification différente selon qu’on l’utilise comme valeur minimum ou maximum de la fonction minmax(). Si c’est le maximum, la valeur auto est équivalente à la valeur max-content. Si on l’utilise comme valeur minimum, auto représente la plus grande valeur minimale possible pour la cellule. Cette plus grande valeur minimale est différente de la valeur min-content et spécifiée par min-width/min-height. Pour l’illustrer, voici ce qui se passe lorsque la cellule jaune est réglée sur auto dans le minimum et le maximum.
.grid {
display: grid;
grid-template-columns: minmax(auto, auto) 1fr 1fr;
}
Design responsive sans media queries
Comme nous l’avons vu, les cas d’utilisation de minmax() sont multiples. Mais peut-être le cas d’usage le plus courant et le plus utile est-il la possibilité de créer des designs responsive sans recours aux media queries.
Prenons cette grille par exemple :
Chaque colonne de la grille a une largeur minimale de 200px. À mesure que l’écran est redimensionné, le nombre de colonnes change, pour s’adapter à leur largeur idéale. Avec CSS Grid et la fonction minmax(), c’est l’affaire de deux ligne de CSS :
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
À côté de la fonction minmax(), il y a deux autres ingrédients-clés :
repeat(): cette fonction nous permet de spécifier la même valeur pour plusieurs colonnes de la grille. Elle prend deux valeurs, le nombre de répétitions et la valeur à répéter.auto-fit: ce mot-clé peut être utilisé avec la fonctionrepeat()à la place du nombre de répétitions. Le nombre de colonnes est donc modifié de manière flexible, en fonction de la largeur possible pour chaque colonne.
Une limite importante de cette technique toutefois est qu’elle ne fonctionne qu’avec des colonnes de largeur égale. Nous devons utiliser la fonction repeat()avec le mot-clé auto-fit car c’est ce qui permet la flexibilité du nombre de colonnes. Cela étant, si ce cas de figure correspond à vos besoin, c’est une technique très utile.
Les lignes Grid
Une fois que nous avons une grille, nous avons un ensemble de lignes.
Concepts de base du positionnement par ligne
Pour placer un item sur la grille, nous définissons la ligne depuis laquelle il part et celle où il s’arrête. Gardez à l’esprit que nous visons la ligne, non la piste elle-même.
.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
On peut utiliser les raccourcis :
.item {
grid-column: 2 / 4;
grid-row: 1 / 4;
}
Le raccourci grid-area :
.item {
grid-area: 1 / 2 / 4 / 4;
}
L’ordre de ces quatre lignes est grid-row-start, grid-column-start, grid-row-end, grid-column-end.
La ligne finale notre grille explicite a pour numéro -1 et les lignes sont numérotées à l’envers à partir de là, la deuxième ligne a donc pour numéro -2. Par conséquent, si vous voulez que votre item s’étende sur toutes les pistes de la grille explicite, vous pouvez écrire :
.item {
grid-column: 1 / -1;
}
Il n’est pas possible de cibler la dernière ligne de la grille implicite si l’on ne sait pas combien de lignes on a.
Utiliser le mot-clé span
Dans certains cas, vous savez que vous voulez avoir un item qui s’étend sur un certain nombre de pistes, mais vous ne savez pas exactement où dans la grille. Dans ce cas, vous pouvez utiliser le mot-clé span. L’exemple ci-dessous montre un item qui commence à la ligne auto, c’est la ligne où l’auto-placement le mettrait, et il couvre ensuite trois pistes.
.item {
grid-column: auto / span 3;
}
Placement d’items basé sur les lignes
Grid place automatiquement les items dans des cellules vides de la grille, il ne va pas les empiler dans la même cellule. Cependant, en utilisant le placement basé sur les lignes, nous pouvons mettre les items dans la même cellule.
Grid template areas
Décrire une mise en page avec grid-template-areas
La propriété grid-template-areas accepte pour valeur une ou plusieurs chaînes de caractères. Chacune, entourée de guillemets, représente une rangée de notre grille.
La propriété et les valeurs qui suivent décrivent une grille comportant quatre zones — chacune s’étend sur deux pistes de colonnes et deux pistes de rangées. Une zone (area) peut s’étendre sur plusieurs pistes lorsqu’on en répète le nom dans toutes les cellules qu’on veut couvrir :
grid-template-areas: "one one two two"
"one one two two"
"three three four four"
"three three four four";
Les items sont placés dans la mise en page en étant nommés dans la propriété grid-area. Si nous voulons placer un élément ayant une classe test dans la zone de la grille qui s’appelle one, il suffit d’écrire :
.test {
grid-area: one;
}
Règles d’utilisation de grid-template-areas
Il y a des règles à suivre lorsqu’on crée une mise en page de cette façon. Ne pas les respecter rendra les valeurs invalides et notre mise en page ne fonctionnera pas. La première règle est que nous devons décrire une grille complète, chaque cellule de la grille doit être remplie.
Si l’on veut laisser une ou plusieurs cellules vides, on exprime ce choix en insérant un point . ou une série de points ... sans espace entre eux.
grid-template-areas: "one one two two"
"one one two two"
". . four four"
"three three four four";
Nous ne pouvons définir chaque zone qu’une seule fois, c’est à dire que nous ne pouvons utiliser cette propriété pour copier du contenu à deux endroits sur la grille ! Les valeurs qui suivent seraient invalides et la propriété dans son ensemble serait ignorée, car nous avons dupliqué la zone three :
grid-template-areas: "one one three three"
"one one two two"
"three three four four"
"three three four four";
On ne peut pas non plus créer une zone non-rectangulaire, la propriété ne peut pas être utilisée pour créer une zone en forme de T ou de L, et les valeurs ci-dessous sont également invalides :
grid-template-areas: "one one two two"
"one one one one"
"three three four four"
"three three four four";
on peut, de manière tout à fait valide, aligner toutes les chaînes de caractères sur une seule ligne, on pourrait donc écrire :
grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";
Mettre en page des items avec grid-template-areas
Avec grid-template-areas, une cellule ne peut être occupée que par un seul nom, cependant nous pouvons toujours ajouter des items à la grille après avoir réalisé notre mise en page principale de cette manière. Pour cela, nous avons les lignes numérotées, comme d’habitude.
Dans l’exemple suivant, j’ai ajouté un item supplémentaire et je l’ai placé par-dessus les items déjà présents en utilisant le positionnement basé sur les numéros de lignes.
<div class="grid">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
.grid {
border: 5px solid rgb(111,41,97);
display: grid;
grid-template-areas:
"one one two two"
"one one two two"
"three three four four"
"three three four four";
gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
inline-size: 500px;
}
.grid > * {
background-color: rgba(111,41,97,.4);
border-radius: 5px;
padding: 10px;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
.grid > .five {
background-color: orange;
grid-row: 2 / 4;
grid-column: 2 / 4;
}
grid template areas dans un design responsif
.wrapper {
background-color: #fff;
padding: 1em;
display: grid;
gap: 20px;
grid-template-areas:
"hd"
"bd"
"sd"
"ft";
}
@media (min-width: 600px) {
.wrapper {
grid-template-columns: 3fr 1fr;
grid-template-areas:
"hd hd"
"bd sd"
"ft ft";
}
}
header { grid-area: hd; }
article {grid-area: bd; }
aside { grid-area: sd; }
footer { grid-area: ft; }
Accessibilité
Il faut être prudent lorsqu’on utilise cette méthode et se rappeler qu’elle peut amener à une réorganisation du contenu qui peut se trouver déconnecté de l’ordre de la source. Un utilisateur naviguant avec la tabulation regarde l’écran tout en écoutant un texte dit par l’ordinateur, et ce dernier lit le contenu dans l’ordre où il figure dans la source HTML. Cela peut entraîner beaucoup de confusion pour l’utilisateur.
Références et ressources
CSS Grid Layout, guide complet, daté du 18 avril 2016, par Chris House, sur le site de La Cascade.
Référence CSS : Grid (codrops)
Layout Land sur YouTube
Grille CSS et formes personnalisées, daté du 28 août 2022, par Temani Afif, sur le site de La Cascade