Mauerwerkslayout

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

Stufe 3 der CSS Grid Layout-Spezifikation umfasst einen masonry-Wert für grid-template-columns und grid-template-rows. Dieser Leitfaden beschreibt, was ein Mauerwerkslayout ist und wie es verwendet wird.

Das Mauerwerkslayout ist eine Layoutmethode, bei der eine Achse ein typisches striktes Gitternetzlayout verwendet, meist Spalten, und die andere ein Mauerwerkslayout. Auf der Mauerwerksachse halten sich die Elemente nicht an ein striktes Gitternetz, bei dem Lücken nach kürzeren Elementen verbleiben. Stattdessen werden die Elemente in der folgenden Reihe nach oben verschoben, um die Lücken vollständig zu füllen.

Erstellen eines Mauerwerkslayouts

Um das häufigste Mauerwerkslayout zu erstellen, sind Ihre Spalten die Gitterachse und die Zeilen die Mauerwerksachse, definiert mit grid-template-columns und grid-template-rows. Die Kind-Elemente dieses Containers legen sich nun Element für Element entlang der Zeilen an, wie sie es auch bei der automatischen Platzierung von regulären Gitterlayouts tun würden.

Wenn die Elemente in neue Zeilen verschoben werden, erfolgt ihre Anzeige gemäß dem Mauerwerksalgorithmus. Die Elemente laden in die Spalte mit dem meisten Platz, was zu einem dicht gepackten Layout ohne strikte Reihenabstände führt.

* {
  box-sizing: border-box;
}

body {
  font: 1.2em sans-serif;
}

.grid {
  padding: 10px;
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.item {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}

css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

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>

// 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 Mauerwerkslayout zu erstellen, bei dem die Elemente in die Zeilen geladen werden.

// 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;
  gap: 10px;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 100px);
}

Steuerung der Gitterachse

Auf der Gitterachse funktionieren die Dinge wie erwartet im Gitterlayout. Sie können Elemente dazu bringen, mehrere Spuren zu überbrücken, während sie in der automatischen Platzierung bleiben, indem Sie das Stichwort span verwenden. Elemente können auch mithilfe der linienbasierten Positionierung platziert werden.