Maison > Article > interface Web > 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

PHPzoriginal: 2023-10-20 13:58:471228parcourir

Tutoriel HTML : Utiliser la mise en page en grille pour implémenter la mise en page en grille

La mise en page Web est une partie importante de la conception Web. Une mise en page Web raisonnable peut améliorer l'expérience de navigation de l'utilisateur. La mise en page en grille est une technologie très importante dans la mise en page moderne des pages Web, qui peut nous aider à mettre en œuvre facilement la mise en page en grille.

Dans cet article, nous apprendrons comment créer une disposition de grille raster à l'aide de la disposition de grille HTML et CSS, et fournirons quelques exemples de code concrets. Commençons !

Créer une structure HTML

Tout d'abord, nous devons créer la structure HTML de base. Voici un exemple simple :

<!DOCTYPE html>
<html>
  <head>
    <title>Grid布局示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </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 class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

Dans cet exemple, nous créons un conteneur avec 9 éléments enfants. Chaque élément enfant a une classe « élément » et nous utiliserons la disposition en grille pour les disposer.

Écriture de styles CSS

Ensuite, nous devons écrire des styles CSS pour définir les propriétés de la disposition de la grille. Nous définissons les styles dans une feuille de style externe appelée styles.css, puis nous la lions au document HTML.

Voici le contenu de base de styles.css :

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

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

Dans cet exemple, nous avons appliqué l'attribut display:grid sur l'élément .container pour qu'il devienne un conteneur Grid. L'attribut grid-template-columns définit la largeur de chaque colonne. Ici nous utilisons "repeat(3, 1fr)", ce qui signifie que le conteneur est divisé en 3 colonnes, et la largeur moyenne de chaque colonne est de 1fr. L'attribut grid-gap définit la taille de l'écart. Les styles de l'élément

.item définissent la couleur d'arrière-plan, le remplissage et l'alignement du texte centré.

Exécutez le code et voyez les résultats

Enregistrez le code ci-dessus en tant que fichier HTML et créez le fichier styles.css dans le même répertoire. Ensuite, ouvrez le fichier HTML dans le navigateur et vous pourrez voir que la mise en page de la page Web a été contrôlée par la mise en page de la grille.

Nous pouvons voir que les éléments enfants sont disposés selon la disposition de la grille raster, la largeur de chaque élément enfant est uniformément répartie et il y a un écart de 10 px entre eux.

Explorez davantage les fonctionnalités de la disposition en grille

La disposition en grille ne se limite pas à la disposition en grille de base, mais fournit également plus de fonctionnalités pour obtenir des dispositions plus complexes.

Par exemple, nous pouvons utiliser la propriété grid-template-rows pour définir la hauteur de chaque ligne. Nous pouvons également utiliser l'attribut grid-area pour personnaliser la position des éléments enfants, et l'attribut grid-template-areas pour créer une disposition de zone personnalisée.

De plus, la disposition en grille fournit également d'autres propriétés, telles que les colonnes automatiques de grille et les lignes automatiques de grille, qui sont utilisées pour définir le comportement lorsque le nombre d'éléments enfants dans le conteneur dépasse la définition de la grille.

Résumé :

Cet article explique comment utiliser la disposition des grilles HTML et CSS pour implémenter la disposition des grilles raster et fournit des exemples de code spécifiques. J'espère que cet article aidera tout le monde à comprendre et à utiliser la disposition en grille. Dans les applications pratiques, nous pouvons utiliser de manière flexible diverses propriétés de la disposition en grille pour créer une mise en page Web qui répond à nos propres besoins.

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 auto class 样式表内边距 display

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：Comment créer une disposition de mur d'affichage d'images réactive à l'aide de HTML et CSSArticle suivant：Comment créer une disposition de mur d'affichage d'images réactive à l'aide de HTML et CSS

Articles Liés

Voir plus