Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition en grille

Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition en grille, des exemples de code spécifiques sont requis

Introduction :
Dans la conception Web moderne, la disposition en grille est une méthode de mise en page très populaire et pratique. Il peut aider les développeurs à contrôler de manière plus flexible la mise en page et la composition des pages Web, rendant ainsi les pages Web plus belles et plus faciles à lire. Cet article vous expliquera comment utiliser la disposition en grille en HTML pour la disposition en grille et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement.

Partie 1 : Concepts de base de la disposition en grille
La disposition en grille est une nouvelle méthode de mise en page fournie par le module CSS Grid Layout. Il divise la page Web en cellules de grille et les développeurs peuvent placer des éléments dans ces cellules de grille. La disposition en grille a les concepts de base suivants :

1. Grid Container : Le conteneur principal de la grille. Vous pouvez créer un conteneur de grille en définissant l'attribut d'affichage de l'élément sur grid ou inline-grid.
2. Élément de grille : chaque élément enfant du conteneur de grille est un élément de grille et il est placé dans les cellules du conteneur de grille.
3. Ligne de grille : la ligne de séparation horizontale ou verticale de la grille, qui peut être utilisée pour placer des éléments de la grille.
4. Grid Track : La zone située entre deux lignes de grille adjacentes, qui peut être utilisée pour définir la largeur ou la hauteur des éléments de la grille.
5. Cellule de grille : une zone entourée de deux lignes de grille horizontales et verticales adjacentes.
6. Zone de grille : une zone rectangulaire entourée de quatre lignes de grille, qui peut être utilisée pour placer plusieurs éléments de grille.

Partie 2 : Créer une grille de base à l'aide de la disposition en grille
Tout d'abord, nous devons créer un conteneur de grille et placer les éléments enfants dans la grille. La structure HTML peut être aussi simple que ce qui suit :

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Ensuite, nous devons définir certaines propriétés du conteneur de grille en CSS pour implémenter la disposition de la grille :

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

Dans le code ci-dessus, nous définissons l'attribut d'affichage du conteneur de grille à grid , indiquant la création d'une disposition en grille. L'attribut grid-template-columns est utilisé pour définir le nombre et la largeur des colonnes du conteneur de grille. Ici, nous divisons la grille en trois colonnes, et la largeur de chaque colonne est égale à 1fr pour indiquer la largeur uniformément répartie. L'attribut grid-gap est utilisé pour définir la taille de l'écart entre les grilles. Ici, nous définissons l'écart sur 10px.

Maintenant, nous pouvons placer quatre éléments de grille dans le conteneur de grille et spécifier leurs positions :

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

Dans le code ci-dessus, nous avons défini quatre éléments de grille et les avons transmis via les propriétés de colonne de grille et de ligne de grille spécifiant leur position dans le conteneur de grille. grille.

Partie 3 : Utiliser la disposition en grille pour créer une grille réactive
En plus de la disposition en grille de base, Grid Layout prend également en charge la disposition réactive, qui peut ajuster automatiquement la disposition de la grille en fonction de la taille et de la résolution de l'écran.

Par exemple, on peut afficher une grille à trois colonnes sur un grand écran et seulement une grille à une colonne sur un petit écran. Le code est le suivant :

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

Dans le code ci-dessus, nous utilisons la fonction repeat() et la fonction minmax() de l'attribut grid-template-columns pour implémenter une mise en page réactive. La fonction repeat() est utilisée pour répéter la définition d'une piste de grille, l'ajustement automatique signifie remplir automatiquement la grille en fonction de la taille du conteneur, et la fonction minmax() est utilisée pour limiter la largeur minimale et maximale de chaque grille. piste.

Partie 4 : Conclusion
Grâce à la mise en page en grille, nous pouvons contrôler de manière plus flexible la mise en page et la composition des pages Web pour obtenir un effet plus beau et plus lisible. Cet article présente les concepts de base de la disposition en grille et fournit des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. J'espère que les lecteurs pourront utiliser la disposition en grille dans le développement réel pour créer une excellente conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!