Propriétés de disposition du panneau CSS : grille et colonnes de modèle de grille

Propriétés de disposition des panneaux CSS : grille et colonnes de modèle de grille

Dans la mise en page Web moderne, la disposition des panneaux est une méthode de conception courante qui permet d'organiser le contenu Web dans une grille. L'attribut de disposition de grille en CSS et l'attribut de grille-template-columns sont les clés pour réaliser la disposition des panneaux.

1. Introduction à l'attribut de disposition en grille

L'attribut de disposition en grille est une propriété CSS utilisée pour créer une disposition en grille. En divisant les éléments HTML en grilles, vous pouvez facilement créer des structures de mise en page complexes. L'utilisation de la disposition en grille permet non seulement d'obtenir une disposition en colonnes, mais également d'obtenir une disposition réactive et de disposer de puissantes capacités d'alignement et de redimensionnement.

2. Explication détaillée de l'attribut grid-template-columns

L'attribut grid-template-columns est utilisé pour définir le nombre et la largeur des colonnes de la grille. En définissant la valeur de grid-template-columns, vous pouvez ajuster rapidement et de manière flexible la disposition de la grille.

Voici plusieurs exemples de codes de colonnes de modèle de grille couramment utilisés :

1. Disposition de colonne uniforme :

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

Le code ci-dessus divise l'élément .grid-container en 3 colonnes et distribue la largeur de manière égale à chaque colonne.

2. Définissez la largeur de colonne spécifiée :

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

Le code ci-dessus divise l'élément .grid-container en 3 colonnes, la largeur de la colonne 1 est de 200 pixels, la proportion de la colonne 2 par rapport à l'espace restant est de 1 et la la largeur de la colonne 3 est de 300 pixels.

3. Utilisez les lignes de quadrillage pour la séparation :

.grid-container {
  display: grid;
  grid-template-columns: [col1-start] 200px [col2-start] 1fr [col2-end col3-start] 300px [col3-end];
}

Le code ci-dessus utilise des crochets pour spécifier les noms des lignes de quadrillage, qui peuvent être utilisées dans la mise en page pour l'alignement et le positionnement.

3. Application des attributs de disposition en grille dans la disposition des panneaux

Les attributs de disposition en grille et les attributs de grille-modèle-colonnes sont des outils puissants pour implémenter la disposition des panneaux. Vous pouvez facilement obtenir l'effet d'une disposition en grille en divisant le panneau en colonnes et en définissant différentes largeurs.

Ce qui suit est un exemple de code de disposition de panneau spécifique :

.panel-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.panel {
  background-color: #f2f2f2;
  padding: 20px;
}

Dans le code ci-dessus, l'élément .panel-container est divisé en deux colonnes et le rapport de largeur de chaque colonne est de 1:2. Dans le même temps, en définissant l'attribut gap, l'intervalle entre les colonnes est défini à 20 pixels.

Ensuite, nous ajoutons deux sous-éléments .panel dans l'élément .panel-container, qui s'affichent comme le contenu du panneau :

<div class="panel-container">
  <div class="panel">
    内容 1
  </div>
  <div class="panel">
    内容 2
  </div>
</div>

Avec une telle mise en page, nous pouvons rapidement créer une page avec deux panneaux, chaque panneau Le le rapport de largeur est de 1:2 et a une plus belle apparence.

Résumé :

L'attribut de disposition de grille et l'attribut grille-template-columns de CSS fournissent des fonctions puissantes pour implémenter facilement des dispositions de grille complexes. Dans la disposition du panneau, en définissant l'attribut grid-template-columns, nous pouvons contrôler de manière flexible le nombre et la largeur des colonnes du panneau pour obtenir différents effets de disposition. Qu'il s'agisse d'une disposition en colonnes, d'une mise en page réactive ou d'autres structures de mise en page complexes, l'attribut de mise en page en grille peut facilement le gérer.

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!