Comment créer une grille de maçonnerie avec une disposition de grille CSS ?

Créer une grille de maçonnerie avec une disposition de grille CSS

Obtenir une disposition de grille réactive où les éléments ont des hauteurs variables mais la même largeur peut être difficile en utilisant flexbox ou flotteurs. Au lieu de cela, envisagez d'utiliser le puissant module CSS Grid Layout.

CSS Grid Layout offre une solution flexible et efficace pour créer des dispositions de grille complexes :

1. Affichage : Définissez l'élément conteneur pour qu'il affiche : grid pour indiquer qu'il s'agit d'un conteneur de grille.
2. Rangées automatiques de la grille : Spécifiez la hauteur cohérente de la grille. lignes utilisant des lignes automatiques de grille : 50 px. Ceci définit la hauteur par défaut de chaque ligne.
3. Grid Gap : Ajoutez un espacement entre les éléments de la grille avec l'espacement de la grille : 10 px.
4. Colonnes du modèle de grille : définissez la disposition des colonnes à l'aide de grid-template-columns : répéter (auto-fill, minmax (30%, 1fr)). Cela crée une grille avec des colonnes d'au moins 30 % de largeur, remplissant l'espace restant de manière uniforme.
5. Spanning Rows : Utilisez la propriété grid-row sur des éléments individuels de la grille pour contrôler le nombre de lignes qu'ils portée. Par exemple, [tall] s'étend sur deux lignes, tandis que [tallest] en étend quatre.

Exemple HTML :

<grid-container>
  <grid-item short></grid-item>
  <!-- ... more grid items -->
</grid-container>

Exemple CSS :

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

[short] {
  grid-row: span 1;
  background-color: green;
}

/* ... more grid item styles */

En appliquant ces règles CSS, vous pouvez obtenir un système de grille de type maçonnerie dans lequel les éléments ajustent leur hauteur de manière dynamique, garantissant une disposition équilibrée et réactive.

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!