Tutoriel HTML : Comment utiliser la disposition en grille pour une disposition en grille adaptative-tutoriel HTML-php.cn

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

WBOY

Libérer： 2023-10-27 08:11:20

original

1055 Les gens l'ont consulté

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

Dans le développement front-end, la mise en page Web est un lien important. Dans la mise en page moderne des pages Web, la mise en page en grille est devenue un choix très populaire. Cela peut nous aider à créer diverses dispositions de grille de manière rapide et flexible, et à obtenir des effets adaptatifs. Cet article explique comment utiliser la disposition en grille pour une disposition en grille adaptative et fournit des exemples de code spécifiques.

1. Introduction à la disposition en grille

La disposition en grille est un module en CSS qui offre la possibilité de diviser les pages Web en lignes et en colonnes. Nous pouvons implémenter une disposition de grille adaptative en définissant des conteneurs de grille et des éléments de grille.

Le conteneur Grid est la première étape pour utiliser la disposition Grid. Nous devons sélectionner un élément dans le document HTML en tant que conteneur de grille et utiliser display: grid en CSS pour spécifier que le conteneur utilise la disposition en grille. Par exemple : display: grid来指定该容器使用Grid布局。例如：

.container {
  display: grid;
}

Copier après la connexion

接下来，我们可以通过设置grid-template-columns和grid-template-rows属性来定义网格容器的行和列。这两个属性接受一个值列表，每个值代表一个网格单元的大小。例如：

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

Copier après la connexion

上述代码会将网格容器划分为两列（每列宽度为网格容器宽度的一半）和两行（分别为100px和200px高）。

接着，我们可以将网格项放置在网格容器中。网格项是网格容器的直接子元素，可以使用grid-column和grid-row属性来指定网格项在网格中的位置。例如：

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

Copier après la connexion

上述代码会将网格项放置在第一列的位置，并跨越两列和一行。

二、自适应网格布局

使用Grid布局可以实现自适应的网格布局，这意味着网格项可以跟随网页的大小进行自动调整。在实际开发中，经常会遇到需要在不同的屏幕尺寸下展示不同的布局的情况。Grid布局可以很好地满足这个需求。

在实现自适应的网格布局时，我们可以使用minmax

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

Copier après la connexion

Ensuite, nous pouvons définir les lignes et les colonnes du conteneur de grille en définissant les propriétés grid-template-columns et grid-template-rows. Ces deux propriétés acceptent une liste de valeurs, chaque valeur représentant la taille d'une cellule de la grille. Par exemple :

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Copier après la connexion

Le code ci-dessus divisera le conteneur de grille en deux colonnes (chaque colonne fait la moitié de la largeur du conteneur de grille) et deux lignes (respectivement 100 px et 200 px de haut).

Ensuite, nous pouvons placer les éléments de la grille dans le conteneur de la grille. Les éléments de grille sont des éléments enfants directs du conteneur de grille. Vous pouvez utiliser les attributs grid-column et grid-row pour spécifier la position de l'élément de grille dans la grille. Par exemple :

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
  
    .item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Copier après la connexion

Le code ci-dessus placera l'élément de grille à la première position de la colonne et s'étendra sur deux colonnes et une ligne.

2. Disposition de grille adaptative

L'utilisation de la disposition de grille peut obtenir une disposition de grille adaptative, ce qui signifie que les éléments de la grille peuvent s'ajuster automatiquement en fonction de la taille de la page Web. Dans le développement réel, nous rencontrons souvent des situations dans lesquelles nous devons afficher différentes mises en page sur différentes tailles d'écran. La disposition en grille peut très bien répondre à cette exigence.

Lors de la mise en œuvre d'une disposition de grille adaptative, nous pouvons utiliser la fonction minmax pour définir la plage de tailles du conteneur de grille ou des éléments de grille. Cette fonction accepte deux paramètres, le premier paramètre représente la valeur minimale et le deuxième paramètre représente la valeur maximale. Par exemple :

rrreee

Le code ci-dessus définira la largeur de chaque colonne du conteneur de grille à 200px et remplira automatiquement la zone vide du conteneur de grille.

Sur les appareils mobiles, nous souhaiterons peut-être ajuster la disposition de la grille sur une seule colonne. Vous pouvez utiliser des requêtes multimédias pour obtenir cet effet. Par exemple : 🎜rrreee🎜Le code ci-dessus ajustera le conteneur de grille sur une seule colonne lorsque la largeur de l'écran est inférieure à 768 pixels. 🎜🎜3. Exemple de code spécifique🎜🎜Ce qui suit est un exemple de code spécifique de disposition de grille adaptative utilisant la disposition de grille : 🎜rrreee🎜Le code ci-dessus divisera le conteneur de grille en plusieurs colonnes, chaque colonne a une largeur de 200 px et le fera automatiquement. remplir les zones vides. Lorsque la largeur de l'écran est inférieure à 768 pixels, le conteneur de grille sera ajusté sur un affichage à une seule colonne. 🎜🎜Résumé🎜🎜La mise en page en grille est un puissant outil de mise en page en grille qui peut nous aider à créer une mise en page de pages Web de manière rapide et flexible. La disposition en grille peut être utilisée pour implémenter une disposition en grille adaptative, permettant aux pages Web d'afficher différentes dispositions sur différentes tailles d'écran. Grâce aux exemples de code fournis dans cet article, je pense que les lecteurs peuvent mieux comprendre et utiliser la disposition en grille pour une disposition en grille adaptative. 🎜

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!