Maison >interface Web >tutoriel CSS >Comment créer une grille de maçonnerie avec une disposition de grille CSS ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-20 04:54:02871parcourir

How to Create a Masonry Grid with CSS Grid Layout?

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!

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