Wie kann ich mit CSS Grid Layout ein Mauerwerksraster erstellen, bei dem jedes Element die gleiche Breite hat, das untere Element jedoch immer 50 Pixel unter dem oberen Element liegt?-CSS-Tutorial-php.cn

Wie kann ich mit CSS Grid Layout ein Mauerwerksraster erstellen, bei dem jedes Element die gleiche Breite hat, das untere Element jedoch immer 50 Pixel unter dem oberen Element liegt?

Linda Hamilton

Freigeben： 2024-11-17 11:35:02

Original

386 Leute haben es durchsucht

How can I create a masonry grid with CSS Grid Layout where each element has the same width but the bottom element is always 50px below the top element?

Erstellen Sie ein Mauerwerksraster mit CSS-Rasterlayout (oder anderem CSS)

Die Frage fragt nach einer Möglichkeit, ein Mauerwerk zu erreichen Rastereffekt in CSS mit Elementen unterschiedlicher Höhe, wobei jedes Element die gleiche Breite hat, das untere Element jedoch immer 50 Pixel unter dem oberen Element liegt. Der Benutzer hat versucht, Floats und Flexbox zu verwenden, ist jedoch auf Probleme gestoßen.

Verwenden des CSS-Rasterlayouts

Eine Lösung ist die Verwendung des CSS-Rasterlayouts, das eine leistungsstarke und leistungsstarke Lösung bietet flexible Möglichkeit, Raster zu erstellen. Der folgende CSS-Code zeigt, wie Sie den gewünschten Effekt erzielen:

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

Nach dem Login kopieren

Der HTML-Code zur Verwendung dieses Layouts lautet wie folgt:

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

Nach dem Login kopieren

Mit diesem Code können Sie ein Mauerwerk erzielen Rastereffekt mit Elementen unterschiedlicher Höhe, einheitlich und reaktionsschnell angeordnet.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Grid Layout ein Mauerwerksraster erstellen, bei dem jedes Element die gleiche Breite hat, das untere Element jedoch immer 50 Pixel unter dem oberen Element liegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!