PHP les erreurs les plus courantes
Utiliser la propriété grid-template pour définir la structure de votre grille CSS
grid-template: [rows] / [columns];rows définit le nombre de lignes et leur hauteur dans la grille.
Exemple Copier le code
grid-template: repeat(2, 1fr) / repeat(2, 1fr);Pour définir une grille à deux lignes de hauteur fixe (50px et 100px) et deux colonnes de largeur fixe (25% et 50%), vous pouvez utiliser la syntaxe suivante :
Exemple Copier le code
grid-template: 50px 100px / 25% 50%;Pour définir une grille à deux lignes nommées (header et content) et une colonne nommée (sidebar), vous pouvez utiliser la syntaxe suivante :
Exemple Copier le code
grid-template: "header header" 50px "content sidebar" 1fr 200px / 1fr 200px;Il existe de nombreuses autres façons de définir la grille avec la propriété grid-template, notamment en utilisant des gabarits de grille personnalisés et en spécifiant des lignes ou des colonnes de grille implicites. Pour en savoir plus sur les différentes options et syntaxes disponibles, vous pouvez consulter la documentation sur la propriété grid-template sur le site Web de MDN (Mozilla Developer Network).
Valeurs par défaut | none none none |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS1 |
Syntaxe JavaScript: | object.style.gridTemplate="250px / auto auto" |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 57 | 16 | 52 | 10 | 44 |
Exemple Copier le code
.container { display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); }Dans cet exemple, nous utilisons la syntaxe repeat(n, size) pour définir deux colonnes de largeur égale (1 fraction unité, ou fr). Nous pouvons également utiliser la syntaxe grid-template-rows et grid-template-columns séparément pour définir le nombre de lignes et de colonnes de la grille :
Exemple Copier le code
.container { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }Il est également possible de définir des dimensions fixes pour les lignes et les colonnes de la grille en utilisant des valeurs en pixels ou en pourcentage :
Exemple Copier le code
.container { display: grid; grid-template-rows: 50px 100px; grid-template-columns: 25% 50%; }Vous pouvez également utiliser la propriété grid-template pour définir des lignes de grille nommées, ce qui peut être utile lorsque vous souhaitez référencer des lignes ou des colonnes spécifiques dans votre grille. Par exemple :
Exemple Copier le code
.container { display: grid; grid-template: "header header" 50px "content sidebar" 1fr 200px / 1fr 200px; }Dans cet exemple, nous avons défini deux lignes nommées header et content, ainsi qu'une colonne nommée sidebar. Nous pouvons maintenant référencer ces lignes et colonnes nommées dans d'autres propriétés de grille, comme grid-row et grid-column, pour positionner les éléments de la grille.
Exemple Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>grid-template </title> <style> .container { display: grid; grid-template: "header header header header" 100px "content content content sidebar" auto; gap: 10px; background-color: #2196F3; } .item { background-color: rgba(255, 255, 255, 0.8); padding: 10px 0; font-size: 30px; } .header { grid-area: header; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } </style> </head> <body> <h1>A Webpage Template</h1> <div class="container"> <div class="item header"><h2>Header</h2></div> <div class="item content"><h2>Content</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis nunc sed augue lacus viverra vitae congue eu. Rutrum quisque non tellus orci. Convallis a cras semper auctor neque vitae tempus. Non diam phasellus vestibulum lorem sed risus ultricies. Neque egestas congue quisque egestas diam in. Tincidunt arcu non sodales neque. </div> <div class="item sidebar"><h2>Sidebar</h2><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div> </div> </body> </html>Dans cet exemple, nous avons défini une grille à deux lignes (header et content + sidebar) et deux colonnes (une colonne principale et une colonne latérale). Nous avons également utilisé la propriété grid-area pour positionner les éléments de la grille dans les lignes et les colonnes nommées.