Maison > Article > interface Web > Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition auto-adaptative de la grille

Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition auto-adaptative de la grille

王林original: 2023-10-27 12:18:231292parcourir

Tutoriel HTML : Comment utiliser la mise en page en grille pour une mise en page d'adaptation automatique de la grille

Dans la conception Web moderne, la mise en page en grille est devenue une méthode de mise en page populaire. Il permet aux éléments de la page Web de s'adapter automatiquement à la mise en page dans le système de grille, afin que la page puisse afficher de bons effets de mise en page sur différentes tailles d'écran. Dans cet article, je vais présenter comment utiliser la disposition en grille pour implémenter la disposition d'adaptation automatique de la grille et fournir quelques exemples de code spécifiques.

Grid layout est un puissant système de mise en page en CSS, qui nous permet de créer un conteneur de grille et d'y organiser les éléments. Lorsque vous utilisez la disposition en grille, vous devez d'abord créer un conteneur de grille, c'est-à-dire définir l'attribut d'affichage de l'élément sur grille ou grille en ligne. Ensuite, nous pouvons utiliser diverses propriétés et valeurs pour définir les lignes, les colonnes de la grille, ainsi que la position et la taille des éléments.

Ce qui suit est un exemple simple :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #b21818;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid布局栅格自动适应布局示例</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Dans ce code, nous créons d'abord un conteneur nommé grid-container et définissons son attribut d'affichage sur grid, convertissant ainsi le conteneur en conteneur de grille. Ensuite, nous utilisons la propriété grid-template-columns pour définir le nombre et la largeur des colonnes du conteneur de grille. Dans cet exemple, nous avons défini trois colonnes à largeur automatique avec un espace de 10 px entre chaque colonne. Nous définissons également la propriété padding pour ajouter un espace blanc au conteneur de grille.

Dans le conteneur de grille, nous avons ajouté 9 éléments enfants, à savoir grid-item. Chaque élément a une couleur d'arrière-plan, un texte aligné au centre et une taille de police de 30 px. Ces éléments s'adapteront automatiquement à la disposition dans la grille, remplissant tout le conteneur de la grille.

Lorsque nous utilisons la disposition en grille pour réaliser une disposition d'adaptation automatique de la grille, nous pouvons ajuster de manière flexible la largeur de chaque colonne afin que la page puisse s'adapter à différentes tailles d'écran. Vous pouvez ajuster les propriétés du conteneur de grille et des éléments de grille en fonction des besoins réels pour obtenir l'effet de mise en page souhaité.

En plus de l'attribut grille-template-columns, il existe de nombreux autres attributs de disposition de grille qui peuvent être utilisés, tels que grille-modèle-lignes, grille-écart, grille-ligne-début, etc. En utilisant ces propriétés de manière flexible, nous pouvons créer diverses dispositions de grille, pas seulement les exemples ci-dessus.

Pour résumer, l'utilisation de la disposition en grille pour l'adaptation automatique de la grille est un moyen puissant et flexible de mettre en page des pages Web. En définissant correctement les propriétés du conteneur de grille et des sous-éléments, nous pouvons facilement obtenir une mise en page Web avec de bons effets typographiques. J'espère que cet article pourra vous aider à mieux comprendre et appliquer la disposition en grille.

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!

css html display padding

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel HTML : Comment utiliser Flexbox pour une disposition évolutive à hauteur égaleArticle suivant：Tutoriel HTML : Comment utiliser Flexbox pour une disposition évolutive à hauteur égale

Articles Liés

Voir plus