Mauerwerk-Layout

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Level 3 der CSS-Grid-Layout Spezifikation enthält einen masonry-Wert für grid-template-columns und grid-template-rows. Dieser Leitfaden beschreibt, was das Mauerwerk-Layout ist und wie man es verwendet.

Das Mauerwerk-Layout ist eine Layoutmethode, bei der eine Achse ein typisches striktes Rasterlayout verwendet, am häufigsten die Spalten, und die andere ein Mauerwerk-Layout. Auf der Mauerwerk-Achse, anstatt ein striktes Raster mit Lücken zu haben, die nach kürzeren Elementen bleiben, steigen die Elemente in der folgenden Reihe auf, um die Lücken vollständig zu füllen.

Erstellen eines Mauerwerk-Layouts

Um das häufigste Mauerwerk-Layout zu erstellen, werden Ihre Spalten die Rasterachse und die Reihen die Mauerwerk-Achse, definiert mit grid-template-columns und grid-template-rows. Die Kindelemente dieses Containers werden nun Element für Element entlang der Reihen angeordnet, wie sie es bei automatischer Platzierung im regulären Grid-Layout tun würden.

Wenn die Elemente in neue Reihen übergehen, werden sie gemäß dem Mauerwerk-Algorithmus angezeigt. Elemente werden in die Spalte geladen, die am meisten Platz bietet, was zu einem dicht gepackten Layout ohne strikte Zeilenführung führt.

* {
  box-sizing: border-box;
}

.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" style="block-size: 2em;"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 1.6em;"></div>
  <div class="item" style="block-size: 4em;"></div>
  <div class="item" style="block-size: 2.2em;"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 4.5em;"></div>
  <div class="item" style="block-size: 1em;"></div>
  <div class="item" style="block-size: 3.5em;"></div>
  <div class="item" style="block-size: 2.8em;"></div>
</div>

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

<div class="grid">
  <div class="item" style="inline-size: 2em;"></div>
  <div class="item" style="inline-size: 3em;"></div>
  <div class="item" style="inline-size: 1.6em;"></div>
  <div class="item" style="inline-size: 4em;"></div>
  <div class="item" style="inline-size: 2.2em;"></div>
  <div class="item" style="inline-size: 3em;"></div>
  <div class="item" style="inline-size: 4.5em;"></div>
  <div class="item" style="inline-size: 1em;"></div>
  <div class="item" style="inline-size: 3.5em;"></div>
  <div class="item" style="inline-size: 2.8em;"></div>
</div>

* {
  box-sizing: border-box;
}

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

Steuerung der Rasterachse

Auf der Rasterachse funktioniert alles wie erwartet im Grid-Layout. Sie können Elemente über mehrere Tracks spannen lassen, während sie sich in der automatischen Platzierung befinden, indem Sie das span-Schlüsselwort verwenden. Elemente können auch mit Line-basierter Positionierung positioniert werden.