Comment puis-je créer une grille de maçonnerie avec CSS Grid Layout où chaque élément a la même largeur mais l'élément du bas est toujours 50 pixels en dessous de l'élément du haut ?

Créer une grille de maçonnerie avec une disposition de grille CSS (ou autre CSS)

La question demande un moyen de réaliser une maçonnerie effet de grille en CSS avec des éléments de hauteurs variables, où chaque élément a la même largeur mais l'élément du bas est toujours 50px en dessous de l'élément du haut. L'utilisateur a tenté d'utiliser les flotteurs et Flexbox, mais a rencontré des problèmes.

Utilisation de CSS Grid Layout

Une solution consiste à utiliser CSS Grid Layout, qui fournit un outil puissant et moyen flexible de créer des grilles. Le code CSS suivant montre comment obtenir l'effet souhaité :

grid-container {
  display: grid;             /* Enables the grid layout */
  grid-auto-rows: 50px;      /* Defines the height of each row to 50px */
  grid-gap: 10px;            /* Sets the gap between the grid items */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Defines the columns to have a minimum width of 30% */
}

[short] {
  grid-row: span 1;         /* Makes the element span only one row */
  background-color: green;
}

[tall] {
  grid-row: span 2;         /* Makes the element span two rows */
  background-color: crimson;
}

[taller] {
  grid-row: span 3;         /* Makes the element span three rows */
  background-color: blue;
}

[tallest] {
  grid-row: span 4;         /* Makes the element span four rows */
  background-color: gray;
}

Le code HTML pour utiliser cette mise en page est le suivant :

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

Avec ce code, vous pouvez réaliser une maçonnerie effet de grille avec des éléments de différentes hauteurs, disposés de manière cohérente 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!