Tutoriel HTML : Comment implémenter la disposition en grille à l'aide de la disposition en grille

Tutoriel HTML : Comment utiliser la disposition en grille pour implémenter la disposition en grille

Dans le développement front-end, la mise en œuvre de la disposition en grille est un besoin très courant. La disposition en grille peut organiser de manière flexible divers éléments dans la page Web, rendant la page belle et. A une mise en page réactive. En HTML, nous pouvons utiliser la disposition en grille pour implémenter la disposition en grille. Cet article présentera en détail comment utiliser la disposition en grille pour implémenter la disposition en grille et fournira des exemples de code spécifiques.

Introduction à la disposition en grille

La disposition en grille est une méthode de mise en page en CSS qui dispose les éléments en les plaçant dans une grille. La disposition en grille fournit une méthode de disposition plus intuitive et flexible, qui peut définir des lignes et des colonnes de la grille, afin que les éléments puissent être librement déplacés et disposés dans la grille.

Tout d'abord, introduisez le fichier CSS dans la partie head du HTML :

<link rel="stylesheet" type="text/css" href="style.css">

Définissez la disposition de la grille dans le fichier style.css :

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.box {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

Dans la partie body du HTML, créez un élément conteneur et ajoutez plusieurs éléments box dedans :

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
  <div class="box">盒子5</div>
  <div class="box">盒子6</div>
</div>

Dans le code ci-dessus, l'élément conteneur est défini sur Grid layout via display: grid, et une disposition en grille de 3 colonnes est définie via grid-template-columns: repeat(3, 1fr La largeur de). chaque colonne vaut 1fr, c'est-à-dire répartir l'espace disponible de manière égale. Et grid-gap: 20px définit l'écart entre les éléments de la boîte à 20px.

Dans l'exemple, un total de 6 éléments de boîte sont créés, et ils seront automatiquement disposés dans la disposition Grille, avec 3 éléments d'affilée. Si vous ajoutez d'autres éléments de boîte, ils seront automatiquement ajoutés à la ligne suivante.

Avec l'exemple de code ci-dessus, nous avons réussi à créer une disposition de grille simple. Ensuite, nous présenterons comment créer des mises en page plus complexes dans la mise en page Grille.

Plus de façons d'utiliser la disposition en grille

En plus de la disposition en grille simple, la disposition en grille fournit également plus de fonctions et d'attributs, rendant la disposition plus flexible et diversifiée. Voici quelques propriétés de disposition de grille couramment utilisées :

1. grid-template-rows et grid-template-columns : utilisés pour définir respectivement la taille des lignes et des colonnes. Vous pouvez spécifier une taille de pixel fixe ou utiliser des unités fr. pour une répartition proportionnelle.
2. grille-ligne et grille-colonne : définissez les positions de début et de fin des éléments, vous pouvez utiliser des nombres, des mots-clés (tels que span) et automatique.
3. grid-area : utilisé pour spécifier la ligne et la colonne de début, ainsi que la ligne et la colonne de fin de l'élément.
4. grid-template-areas : en nommant les zones de la grille, vous pouvez disposer les éléments plus facilement.
5. justify-items et align-items : utilisés pour définir l'alignement des éléments dans la grille.

En combinant et en utilisant ces attributs, des effets de mise en page plus complexes peuvent être obtenus.

Résumé

Cet article explique comment utiliser la disposition en grille pour implémenter la disposition en grille et fournit des exemples de code spécifiques. Grâce à la disposition en grille, nous pouvons facilement créer une disposition en grille belle et réactive afin que la page puisse être bien affichée sur des appareils de différentes tailles. Dans le même temps, la disposition en grille offre également plus de flexibilité et de diversité, et des exigences de disposition plus complexes peuvent être satisfaites grâce à différentes propriétés et méthodes. Nous encourageons les lecteurs à explorer et à pratiquer la disposition en grille pour améliorer encore les capacités de développement front-end.

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!