Comment puis-je créer une grille de maçonnerie à l'aide de CSS Grid Layout avec des éléments de différentes hauteurs ?

Création de grilles de maçonnerie avec une disposition de grille CSS

En CSS, obtenir un effet de grille avec des éléments de différentes hauteurs peut être un défi. Cependant, CSS Grid Layout récemment introduit offre une solution puissante.

Utilisation de CSS Grid Layout

Pour créer une grille de maçonnerie à l'aide de CSS Grid Layout, vous pouvez suivre ces étapes :

1. Définissez le conteneur de grille : Utilisez la propriété display:grid pour créer un conteneur de grille.
2. Définissez la hauteur de ligne automatique : Utilisez la propriété grid-auto-rows pour spécifier la hauteur par défaut de chaque ligne de la grille. Cela garantit que les éléments des différentes lignes ont un espacement égal verticalement.
3. Ajuster l'espacement : Utilisez la propriété grid-gap pour définir l'espacement entre les éléments de la grille, à la fois horizontalement et verticalement.
4. Définir la taille des colonnes : Utilisez la propriété grid-template-columns pour spécifier la taille des colonnes dans la grille. Ici, nous définissons le remplissage automatique pour créer une grille avec des tailles de colonnes flexibles, tandis que minmax(30%, 1fr) garantit que les colonnes ont au moins 30 % de largeur et peuvent s'étendre selon les besoins.

Implémentation d'une grille de maçonnerie

Voici un exemple de code HTML et CSS pour créer une grille de maçonnerie :

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

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

Ce code créera une grille de maçonnerie où des éléments de différentes hauteurs sont automatiquement disposés dans une structure en forme de grille uniformément espacée.

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!