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

Tutoriel HTML : Comment utiliser la disposition de grille pour une disposition de grille adaptative, des exemples de code spécifiques sont nécessaires

Introduction :
Avec le développement d'Internet, la mise en page des pages Web est devenue de plus en plus importante. Les méthodes traditionnelles de mise en page de pages Web, telles que l'utilisation de tableaux ou de mises en page flottantes, nécessitent souvent beaucoup de code et d'ajustements pour obtenir des effets adaptatifs. La disposition Grid introduite dans CSS3 offre un moyen plus concis et flexible de créer une disposition de grille adaptative. Cet article vous présentera les concepts de base et les applications pratiques de la disposition en grille, et vous fournira des exemples de code spécifiques.

1. Introduction à la disposition en grille
   La disposition en grille est un nouveau système de disposition en grille en CSS3, qui peut diviser le contenu d'une page Web en lignes et en colonnes pour créer une disposition en grille. La disposition en grille peut être implémentée en deux parties : le conteneur de grille et l'élément de grille. Le conteneur de grille est l'élément parent contenant l'élément de grille, et l'élément de grille est l'élément enfant sous le conteneur de grille.
2. Créer un conteneur de grille
   Tout d'abord, nous devons définir un élément comme un conteneur de grille. En HTML, vous pouvez utiliser un élément <div> pour agir comme un conteneur de grille. Comme indiqué ci-dessous : <code><div>元素来充当网格容器。如下所示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;container&quot;&gt; &lt;!-- 网格项 --&gt; &lt;div class=&quot;item1&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;item2&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;item3&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;item4&quot;&gt;4&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><ol start="3"><li>定义网格布局<br>通过为网格容器设置CSS属性<code>display: grid;，我们可以将其定义为网格布局。此外，还可以使用grid-template-columns和grid-template-rows属性来指定网格的列数和行数。例如，下面的代码将网格容器定义为含有3列和2行的网格布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

4. 设置网格项的位置和大小
   通过为网格项设置CSS属性grid-column和grid-row，我们可以指定每个网格项在网格布局中的位置。例如，下面的代码将网格项1位于第一列的第一行，网格项2位于第二列的第一行，网格项3位于第三列的第二行，网格项4位于第一列的第二行。

.item1 {
  grid-column: 1;
  grid-row: 1;
}

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

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

.item4 {
  grid-column: 1;
  grid-row: 2;
}

5. 自适应网格布局
   在Grid布局中，网格项的大小和位置是可以自适应调整的。我们可以使用grid-template-areas属性来指定每个网格项在网格布局中的位置，并通过使用.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}

Définir la disposition de la grille
En définissant la propriété CSS display: grid; pour le conteneur de grille, nous pouvons le définir comme une disposition de grille . De plus, vous pouvez également utiliser les propriétés grid-template-columns et grid-template-rows pour spécifier le nombre de colonnes et de lignes de la grille. Par exemple, le code suivant définit le conteneur de grille comme une disposition en grille avec 3 colonnes et 2 lignes.
6. 
   

   .container {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
   }
   
   @media screen and (min-width: 600px) {
     .container {
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr;
     }
   }

   Définissez la position et la taille de l'élément de la grille
   En définissant les propriétés CSS grid-column et grid-row pour le élément de grille , nous pouvons spécifier la position de chaque élément de grille dans la disposition de la grille. Par exemple, le code suivant placerait l'élément de grille 1 dans la première ligne de la première colonne, l'élément de grille 2 dans la première ligne de la deuxième colonne, l'élément de grille 3 dans la deuxième ligne de la troisième colonne et l'élément de grille 4 dans la Deuxième ligne de la première colonne.

   
   

   <!DOCTYPE html>
   <html>
   <head>
     <link rel="stylesheet" type="text/css" href="style.css">
     <style>
       .container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 1fr;
       }
   
       .item1 {
         grid-column: 1;
         grid-row: 1;
         background-color: red;
       }
   
       .item2 {
         grid-column: 2;
         grid-row: 1;
         background-color: green;
       }
   
       .item3 {
         grid-column: 1 / span 2;
         grid-row: 2;
         background-color: blue;
       }
     </style>
   </head>
   <body>
     <div class="container">
       <div class="item1">1</div>
       <div class="item2">2</div>
       <div class="item3">3</div>
     </div>
   </body>
   </html>

   Disposition de grille adaptative

   Dans la disposition en grille, la taille et la position des éléments de la grille peuvent être ajustées de manière adaptative. Nous pouvons utiliser l'attribut grid-template-areas pour spécifier la position de chaque élément de la grille dans la disposition de la grille et représenter les espaces en utilisant le caractère .. Par exemple, le code suivant définit le conteneur de grille comme une disposition de grille avec deux colonnes et deux lignes, et place chaque élément de grille dans une position différente.

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
   }
   
   .item1 {
     grid-column: 1;
     grid-row: 1;
     background-color: red;
   }
   
   .item2 {
     grid-column: 2;
     grid-row: 1;
     background-color: green;
   }
   
   .item3 {
     grid-column: 1 / span 2;
     grid-row: 2;
     background-color: blue;
   }

   Disposition de grille réactive

   La disposition de grille peut également facilement implémenter une disposition de grille réactive. Nous pouvons utiliser des requêtes multimédias CSS pour ajuster le style de la disposition de la grille en fonction des différentes tailles d'écran et types d'appareils. Par exemple, le code suivant modifiera la disposition de la grille en une disposition à une seule colonne lorsque la fenêtre est inférieure à 600 px. 🎜🎜rrreee🎜Conclusion : 🎜La disposition en grille fournit un moyen concis et flexible de mettre en œuvre une disposition en grille adaptative. En utilisant des conteneurs de grille et des éléments de grille, nous pouvons facilement créer des mises en page Web complexes qui s'adaptent à différentes tailles d'écran et types d'appareils avec des fonctionnalités adaptatives et réactives. J'espère que cet article pourra vous aider à comprendre et à appliquer la mise en page en grille et à rédiger une mise en page Web plus flexible et plus belle. 🎜🎜Code de référence : 🎜rrreee🎜Fichier CSS (style.css) : 🎜rrreee🎜Ce qui précède est le didacticiel HTML sur la façon d'utiliser la disposition en grille pour la disposition en grille adaptative. J'espère qu'il vous sera utile. N'oubliez pas qu'une utilisation flexible de la disposition en grille peut apporter une meilleure expérience utilisateur et une meilleure esthétique à vos pages Web. Commencez à essayer d'utiliser la disposition en grille ! 🎜