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

Créer une disposition de grille CSS pour un effet de grille de maçonnerie

Le défi : éléments de grille de hauteur inégale

Pour obtenir un effet de grille de maçonnerie, vous voulez éléments de différentes hauteurs pour s'aligner parfaitement sans affecter la position de l'élément en dessous. Cependant, les méthodes traditionnelles telles que floats ou flexbox peuvent ne pas répondre pleinement à cette exigence.

La solution : CSS Grid Layout

Pour des performances optimales, envisagez d'utiliser CSS Grid Layout, un outil puissant spécialement conçu pour gérer dispositions de grille complexes :

1. Définir les propriétés de la grille (grid-container) : Commencez par définir le conteneur de grille avec affichage : grille. Définissez les lignes automatiques de la grille sur la hauteur de ligne par défaut souhaitée (par exemple, 50 px). grid-gap contrôle l'espacement entre les éléments de la grille.
2. Définir les colonnes automatiquement (grid-template-columns) : Utilisez repeat(auto-fill, minmax(30%, 1fr)) pour créer colonnes qui ajustent automatiquement leur largeur en fonction de l'espace disponible. Le minimum de 30 % garantit que les éléments ont une largeur suffisante.
3. Ajuster l'étendue des lignes (grille-ligne) : Utilisez la propriété grille-ligne sur des éléments individuels pour déterminer le nombre de lignes qu'ils occupent. Précisez simplement la travée 1, la travée 2, etc., selon la hauteur souhaitée.

Par exemple :

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

.short {
  grid-row: span 1;
}

.tall {
  grid-row: span 2;
}

.taller {
  grid-row: span 3;
}

.tallest {
  grid-row: span 4;
}

Ce code créera une grille où les éléments varient automatiquement en largeur sans affecter l’alignement de la grille. La hauteur de chaque élément est déterminée par l'étendue de ses lignes désignées.

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!