oujood.com

Définir la structure d'une grille avec les propriétés CSS grid-template-columns et grid-template-rows

Les propriétés grid-template-columns et grid-template-rows définissent les lignes et les colonnes d'un objet display: grid. Elles sont souvent utilisées conjointement pour créer des mises en page
Ces propriétés prennent une liste de tailles de grille ou de noms de lignes/colonnes en valeur et permettent de créer des grilles de toutes tailles et formes.

chercher |

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éfautnone
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é.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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 !




Voir aussi nos tutoriel :

L'attribut tabindex

Spécifie l'ordre de tabulation d'un élément

margin-bottom

Définit la marge bas d'un élément

fonction ucfirst, ucfirst

Met le premier caractère en majuscule