Comment créer une disposition en grille de maçonnerie avec des hauteurs variables en CSS ?

Grille de maçonnerie CSS avec Flexbox ou autres mises en page

Créer une disposition de grille en CSS où les éléments ont des hauteurs variables peut être un défi. Bien que flexbox offre de la flexibilité, il se peut qu'il ne réponde pas à l'exigence selon laquelle les éléments les plus récents s'alignent sur le bas du précédent.

Présentation de la disposition en grille CSS

Au lieu de flexbox, envisagez en tirant parti de CSS Grid Layout à cette fin. Il offre une manière plus robuste et intuitive de réaliser une grille de maçonnerie :

HTML Structure :

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

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;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

Explication :

1. display:grid: Initialise le conteneur sous forme de grille layout.
2. grid-auto-rows : 50px : Définit la hauteur de chaque ligne de la grille à 50 pixels.
3. grid-gap : 10px : Spécifie l'espacement entre la grille items.
4. grid-template-columns : Définit le nombre de colonnes dans la grille (remplissage automatique) et la largeur minimale de chaque colonne (contenu min : 30%, 1fr) .
5. grid-row: span X: Indique que l'élément doit occuper X nombre de grille lignes.

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!