Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

Masonry-Layout

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Level 3 der CSS Grid Layout Spezifikation definiert den Masonry-Layout (auch bekannt als grid-lanes Layout), der über die display Werte grid-lanes und inline-grid-lanes zugänglich ist. Dieser Leitfaden beschreibt, was ein Masonry-Layout ist und wie es verwendet wird.

Ein Masonry-Layout ist eine Layoutmethode, bei der eine Achse einen typischen strikten Grid-Layout verwendet, meist Spalten, und die andere ein Stapellayout (Masonry). Auf der Stapelachse richten sich die Elemente nicht nach einem strengen Grid mit Lücken, die nach kürzeren Elementen verbleiben, sondern die Elemente der folgenden Reihe steigen auf, um die Lücken zu füllen.

Erstellen eines Masonry-Layouts

Um das häufigste Masonry-Layout zu erstellen, bei dem die Spalten in einem Grid angeordnet sind und die Reihen wie Mauerwerk gestapelt sind, verwenden Sie display: grid-lanes zusammen mit grid-template-columns.

Die Kindelemente dieses Containers werden entlang der Stapelachse gemäß dem Masonry-Algorithmus Element für Element angeordnet: Jede Reihe wird in die Spalte mit dem meisten Platz geladen, was zu einem dicht gepackten Layout ohne strikte Reihenspuren führt.

css
.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
html
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
js
// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "3.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.blockSize = itemSizes[i];
}

Es ist auch möglich, ein Masonry-Layout mit Elementen zu erstellen, die in Reihen geladen werden.

js
// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "2.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.inlineSize = itemSizes[i];
}
css
.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-rows: repeat(3, 100px);
}

Steuerung der Grid-Achse

Auf der Grid-Achse funktionieren die Dinge genauso, wie Sie es von einem Grid-Layout erwarten. Sie können Elemente dazu bringen, mehrere Tracks zu umfassen, während sie sich in Auto-Platzierung befinden, indem Sie das span-Schlüsselwort verwenden. Elemente können auch unter Verwendung von linienbasierter Positionierung positioniert werden.

Masonry-Layout mit übergreifenden Elementen

In diesem Beispiel erstrecken sich zwei der Elemente über zwei Tracks, und die Masonry-Elemente arbeiten um sie herum.

html
<div class="grid">
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
css
.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.span-2 {
  grid-column-end: span 2;
}

Dieses Beispiel enthält ein Element, das eine Positionierung für Spalten hat. Elemente mit definierter Platzierung werden vor dem Masonry-Layout platziert.

html
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item positioned">positioned.</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
css
.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.positioned {
  padding: 1em;
  grid-column: 2 / 4;
}

Fallbacks für Masonry-Layout

In Browsern die Masonry nicht unterstützen, wird stattdessen das reguläre Grid-Auto-Placement verwendet.

Spezifikationen

Diese Funktion scheint in keiner Spezifikation definiert zu sein.

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden