grid-template-areas - Propriété CSS
Résumé des caractéristiques de la propriété grid-template-areas
none
none
grid-template-areas
passe d'une valeur à l'autre sans transition.Description de la propriété grid-template-areas
.
La propriété grid-template-areas
permet de nommer des zones dans une grille.
Ces noms pourront ensuite être utilisés avec la propriété grid-area
pour positionner les éléments dans la grille.
Voici comment procéder :
- Définir le nombre de lignes et leur hauteur avec
grid-template-rows
. Définir également le nombre de colonnes et leur largeur avecgrid-template-columns
. - Définir les zones et leur attribuer un nom avec
grid-template-areas
. - Associer chacun des éléments internes à un nom de plage avec la propriété
grid-area
.
grid-template-areas
attend une suite de chaînes de caractères entre apostrophes (autant de chaînes que de lignes dans la grille). Chacune des chaînes contient
une série d'identifiants (autant d'identifiants que de colonnes dans la grille).
En disposant judicieusement ces chaînes les unes en dessous des autres, le code CSS peut gagner en lisibilité et figurer le rendu final de la grille.
Code CSS
Résultat
Chacune des zones doit être rectangulaire. La définition suivante est donc incorrecte car la zone ccc
n'est pas rectangulaire.
Exemples d'utilisation de grid-template-areas
.
Nommer des zones dans la grille est une technique très puissante pour définir des mises en pages complexes avec peu de code.
Utilisation de base de grid-template-areas
.
Voici une disposition classique pour une page web, qui peut se réaliser très facilement avec une grille de 3 lignes et 3 colonnes.
Vous pouvez afficher le code HTML
utilisé pour la construire et le code CSS pour la mettre en forme.
Gauche
Centre
Droite
La figure ci-dessous fait mieux apparaître la logique de fonctionnement de grid-template-areas
en rendant
visible les traits de séparation de la grille. dans chacune des cellules est affiché le nom de la plage à laquelle
elle appartient.
Gauche
Centre
Droite
Exemple plus réaliste, avec du contenu.
En affichant le CSS (il ne s'agit pas d'une image mais bien d'éléments HTML et de leur CSS), vous verrez à quel point il suffit de peu de lignes de code pour obtenir cette mise en page. En dessous, nous avons représenté la grille avec les noms reçus par chacune des cellules.
Sur cet exemple, nous n'avons même pas défini les lignes et les colonnes. Le seul fait de nommer les plages a suffit.
grille
est particulièrement puissante et facile à mettre en œuvre.
La possibilité de prédéfinir des zones et de leur attribuer un nom avec la propriété grid-template-areas
ajoute encore à la simplicité d'utilisation.
On retrouve les principes de travail du framework
bootstrap
.
Nommage automatique des lignes et des colonnes.
grid-template-areas
ne se contente pas de nommer des plages dans la grille, la propriété nomme en plus les lignes
et les colonnes qui délimitent ces plages.
Sur la grille ci-dessous, trois plages ont été nommées jaune
, bleu
et vert
conformément au dessin.
En plus de ces trois noms de plages, grid-template-areas
a défini 6 noms de ligne et 6 noms de colonne.
Ces noms pourront être utilisés avec les propriétés grid-row
et grid-column
pour définir
l'emplacement des éléments dans la grille.
Pour définir l'emplacement d'un élément, nous avons donc le choix, soit d'utiliser le nom d'une plage avec grid-area
,
soit d'utiliser le nom d'une ligne et d'une colonne avec grid-row
et grid-column
.
Ces noms reprennent le nom de la plage suivi de start
ou end
.
Ci-dessous la réalisation de cet exemple avec une grille comportant 3 cellules. Deux variantes du code CSS sont proposées. La première utilise les noms de lignes et de colonnes, la deuxième utilise les noms de plages (plus simple dans ce cas).
Syntaxes pour grid-template-areas
.
'string'
est une suite de chaînes de caractères, entre apostrophes ou entre guillemets.
Il doit y avoir autant de chaînes de caractères qu'il y a de lignes dans la grille.
- grid-template-areas: none;
Valeur par défaut. Aucune plage nommée n'est définie dans la grille.
- grid-template-areas: 'haut-g haut-g haut-d haut-d' 'gauche milieu milieu droite' 'gauche pied-g pied-d droite';
Plusieurs chaînes de caractères séparées par des espaces et entourées de guillemets ou d'apostrophes. Chaque chaîne définit une ligne, et chaque mot dans une chaîne définit une cellule sur la ligne. Toutes ces chaînes doivent contenir le même nombre de mots.
Un point ou une suite de points dans une de ces chaînes de caractères indique une cellule qui ne doit pas être nommée.Évitez de commencer les noms de plages par un chiffre. Ce sera accepté dans la syntaxe de
grid-template-areas
mais compliquera les choses pour associer un des éléments de la grille à cette plage.On peut disposer ces chaînes sur plusieurs lignes, ce qui donne un aperçu visuel de ce que sera la grille résultat.
Attention ! Les zones définies doivent être rectangulaires. La zone verte sur le dessin ci-dessous ne pourrait pas être définie comme une zone unique.
Rappelons que
grid-template-areas
a non seulement défini les noms de 7 plages, mais également 14 noms de lignes et 14 noms de colonnes :haut-g-start
,haut-g-end
,gauche-start
, etc.Remarque : si les lignes et les colonnes de la grille ne sont pas explicitement définies par les propriétés
grid-template-rows
etgrid-template-columns
, elles seront créées pargrid-template-areas
avec la hauteur de ligne par défaut et la largeur de colonne par défaut. Voirgrid-auto-rows
etgrid-auto-columns
pour fixer ces valeurs par défaut. - grid-template-areas:
initial
; grid-template-areas:inherit
; grid-template-areas:revert
; grid-template-areas:revert-layer
; grid-template-areas:unset
;La valeur initiale est :
.none
Animation de la propriété grid-template-areas
.
L'animation de grid-template-areas
peut donner des choses totalement farfelues ou fantaisistes, mais attention
au temps de calcul.
(Bernard Werber)
(Anne Roumanoff)
(Maxime Allain)
Prise en charge de grid-template-areas
par les navigateurs.
La prise en charge de la propriété grid-template-areas
est globalement bonne, sauf pour Internet explorer
qui ne gère pas la notion de zones nommées dans les grilles.
Reportez-vous à la page sur la propriété grid
pour une description plus détaillée des problèmes de compatibilité.
grid-template-areas
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que grid-template-areas
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-template-areas
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.