oujood.com

Créer des grilles de mise en page avancées avec grid-template

Utiliser la propriété grid-template pour définir la structure de votre grille CSS

chercher |

Définition et utilisation da la propriété css

La Syntaxe CSS
Voici la syntaxe de base de la propriété CSS grid-template :
grid-template: [rows] / [columns];
rows définit le nombre de lignes et leur hauteur dans la grille.
columns définit le nombre de colonnes et leur largeur dans la grille.

Voici quelques exemples de la façon dont vous pouvez utiliser la propriété grid-template avec des valeurs différentes :

Pour définir une grille à deux lignes et deux colonnes de largeur et de hauteur égales, vous pouvez utiliser la syntaxe suivante :

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éfautnone none none
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.gridTemplate="250px / auto auto"

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

Voici un exemple simple de la façon dont grid-template peut être utilisé pour définir une grille à deux colonnes de largeur égale :

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.

Astuces et conseils

Voici quelques astuces et conseils pour utiliser la propriété CSS grid-template :

1- Utilisez la propriété repeat(n, size) pour définir facilement un nombre de lignes ou de colonnes de la même taille. Par exemple, repeat(3, 1fr) définit trois lignes ou colonnes de largeur égale.
2- Utilisez des valeurs en pourcentage pour que les lignes et les colonnes de la grille s'ajustent automatiquement à la taille de l'élément parent.
3- Utilisez des lignes et des colonnes nommées pour référencer facilement des parties spécifiques de votre grille dans d'autres propriétés de grille, comme grid-row et grid-column.
4- Utilisez la propriété grid-template-areas pour définir des gabarits de grille personnalisés en utilisant des noms de grille. Cela peut être utile pour créer des grilles de mise en page complexes avec des structures de grille répétitives.
5- N'oubliez pas de définir la propriété display: grid sur l'élément parent pour activer la grille CSS sur cet élément.
6- Si vous utilisez la propriété grid-template avec des valeurs fixes en pixels, n'oubliez pas de tenir compte de la résolution de l'écran et de la densité de pixels de l'appareil sur lequel votre site sera affiché. Utiliser des valeurs en pourcentage ou en unités de fraction peut aider à assurer une mise en page responsive.

N'hésitez pas à expérimenter avec différentes valeurs de grid-template pour trouver la structure de grille qui convient le mieux à vos besoins. La grille CSS est un puissant outil de mise en page qui offre de nombreuses possibilités pour créer des dispositions flexibles.

Exemple HTML et CSS de mise en pratique de la propriété CSS grid-template

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.



Voir aussi nos tutoriel :

fonction stripcslashes

D code une chaîne encodée avec addcslashes

border-right-style

Définit le style de la bordure droite

fonction parse_str

Analyse une requête HTTP