Définition et utilisation das propriétés css grid-template-columns et grid-template-rows
grid-template-columns et grid-template-rows sont deux propriétés CSS qui permettent de définir les lignes et les colonnes d'un objet display: grid.La valeur de grid-template-columns définit la largeur et le nombre de colonnes dans le grille, tandis que la valeur de grid-template-rows définit la hauteur et le nombre de lignes dans le grille. Les deux propriétés prennent une liste de tailles de grille ou de noms de lignes/colonnes comme valeur.
La Syntaxe CSS
Voici la syntaxe générale des propriétés grid-template-columns et grid-template-rows :
grid-template-columns: <track-list>; grid-template-rows: <track-list>;Où <track-list> est une liste de tailles de grille ou de noms de lignes/colonnes. Les tailles de grille peuvent être des valeurs absolues (en pixels, en points, etc.), des valeurs relatives (par exemple fr ou %) ou des mots-clés comme auto. Les noms de lignes/colonnes sont des identificateurs qui peuvent être utilisés pour référencer les lignes et les colonnes dans d'autres propriétés de grille.
Voici quelques exemples de valeurs valides pour <track-list> :
* 100px 200px 100px : trois colonnes de largeur respectivement 100px, 200px et 100px.
* 1fr 2fr 1fr : trois colonnes de largeur respectivement 1 part de la grille, 2 parties de la grille et 1 part de la grille.
* auto 200px 100px : une colonne de largeur auto, une colonne de largeur 200px et une colonne de largeur 100px.
* col-1 col-2 col-3 : trois colonnes nommées col-1, col-2 et col-3.
Voici un exemple d'utilisation de grid-template-columns et grid-template-rows avec des valeurs valides :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50% 50%;
}
Dans cet exemple, nous avons créé un grille de 3 colonnes de largeur respectivement 100px, 200px et 100px, et de 2 lignes de hauteur 50% chacune.| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridTemplateColumns="50px 50px 50px" object.style.gridTemplateRows="50px 200px" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Apprendre à maîtriser les propriétés grid-template-columns et grid-template-rows pour créer des mises en page avancées en CSS
Voici un exemple de comment utiliser grid-template-columns et grid-template-rows :Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 50px;
}
Cet exemple crée un grille de 3 colonnes de largeur respectivement 100px, 200px et 100px, et de 2 lignes de hauteur 50px chacune.Vous pouvez également utiliser des valeurs relatives (par exemple fr ou %) pour définir les tailles des colonnes et des lignes. Par exemple :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50% 50%;
}
Dans cet exemple, les colonnes ont une largeur de 1 part de la grille chacune (soit 1/4 de la largeur totale de la grille), et les lignes ont une hauteur de 50% chacune (soit la moitié de la hauteur totale de la grille).Vous pouvez également utiliser des noms de lignes et de colonnes dans les propriétés grid-template-columns et grid-template-rows. Cela peut être utile pour référencer les lignes et les colonnes dans d'autres propriétés de grille, comme grid-column-start et grid-row-start. Par exemple :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: [col-1] 100px [col-2] 200px [col-3] 100px;
grid-template-rows: [row-1] 50px [row-2] 50px;
}
Dans cet exemple, nous avons donné des noms aux colonnes et aux lignes de la grille (col-1, col-2, col-3, row-1 et row-2). Nous pourrons maintenant référencer ces noms dans les propriétés de grille pour placer des éléments dans la grille.Exemple page html pour une mise en page 3 colonnes et 3 lignes(header menu main et footer) avec les propriétés CSS grid-template-columns et grid-template-rows
Voici comment utiliser les propriétés grid-template-columns et grid-template-rows pour créer une mise en page à 3 colonnes et 3 lignes avec un en-tête, un menu, un contenu principal et un pied de page :Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid-template-columns et grid-template-rows</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px auto 50px;
grid-gap: 10px;
}
.grid div{
border:solid 1px #000;
}
.header {
grid-column: 1 / 4;
grid-row: 1;
}
.menu {
grid-column: 1;
grid-row: 2;
}
.main {
grid-column: 2 / 4;
grid-row: 2;
}
.footer {
grid-column: 1 / 4;
grid-row: 3;
}
</style>
</head>
<body>
<div class="grid">
<div class="header">En-tête</div>
<div class="menu">Menu</div>
<div class="main">
<h1>Exemple page html pour une mise en page 3 colonnes et 3 lignes(header menu main et footer) avec les propriétés CSS grid-template-columns et grid-template-rows</h1><p>Contenu principal</p></div>
<div class="footer">Pied de page</div>
</div>
</body>
</html>
Ce code crée une page HTML avec une mise en page à 3 colonnes et 3 lignes, comprenant un en-tête, un menu, un contenu principal et un pied de page. Les propriétés grid-template-columns et grid-template-rows sont utilisées pour définir la structure de la grille, et les propriétés grid-column et grid-row sont utilisées pour placer chaque élément dans la grille.J'espère que cela vous sera utile !