grid-template
Raccourci qui règle les lignes, les colonnes et les zones nommées de la grille en une seule déclaration.
- Valeur initiale
none- Héritée
- Non
- Animable
- oui, tout comme les propriétés qui le composent
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridTemplate = "auto 1fr / 1fr 1fr"
Exemple
#.card {
display: grid;
grid-template:
"image title" auto
"image text" 1fr
/ 80px 1fr;
gap: 4px 12px;
}<div class="card stage">
<div class="box" style="grid-area: image">IMG</div>
<strong style="grid-area: title">Cours Python</strong>
<span style="grid-area: text">12 modules, des bases à l’apprentissage automatique</span>
</div>Définition et utilisation
#La propriété grid-template réunit grid-template-rows, grid-template-columns et grid-template-areas. Dans sa forme la plus simple, vous donnez les lignes et les colonnes séparées par une barre oblique : grid-template: auto 1fr / 200px 1fr.
Vous pouvez aussi combiner les noms de zones avec les hauteurs de ligne : chaque chaîne de noms reçoit sa hauteur à côté, et après la barre oblique, vous donnez les largeurs de colonnes. Cette écriture est parfois concise, mais plus difficile à lire.
Le raccourci réinitialise les trois propriétés qui le composent, donc les parties omises reviennent à leur valeur par défaut.
Syntaxe
#grid-template: none | <lignes> / <colonnes> | [ "<zones>" <hauteur>? ]+ / <colonnes>;Valeurs
#- Aucune grille explicite.
- Deux lignes (la seconde plus haute) et trois colonnes égales.
- Une ligne basse et une colonne étroite, le reste de l’espace pour les autres.
Valeurs en pratique
#none
.demo { grid-template: none; }1fr 2fr / 1fr 1fr 1fr
.demo { grid-template: 1fr 2fr / 1fr 1fr 1fr; }40px 1fr / 80px 1fr
.demo { grid-template: 40px 1fr / 80px 1fr; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour des mises en page complexes, écrivez
grid-template-areasetgrid-template-columnsséparément. Le raccourci est facile à casser avec un seul caractère. - La barre oblique dans le raccourci sépare toujours les lignes (avant) des colonnes (après).
Entrées associées
#- grid-template-rowsDéfinit les lignes de la grille : leur nombre et leur hauteur.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- grid-template-areasDécrit la mise en page de la grille avec des zones nommées, presque comme un dessin dans le code.
- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.