Masonry-Layout

Um das häufigste Masonry-Layout zu erstellen, werden Ihre Spalten die Grid-Achse und die Zeilen die Masonry-Achse sein. Definieren Sie dieses Layout mit grid-template-columns und grid-template-rows:

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

Die Kind-Elemente dieses Containers werden nun Element für Element entlang der Zeilen angeordnet, wie sie es bei der automatischen Platzierung im regulären Grid-Layout tun würden. Wenn sie jedoch in eine neue Zeile übergehen, werden die Elemente gemäß dem Masonry-Algorithmus dargestellt. Elemente werden in die Spalte geladen, die am meisten Platz bietet, was zu einem dicht gepackten Layout ohne strikte Zeilen führt.

Es ist auch möglich, ein Masonry-Layout zu erstellen, bei dem die Elemente in Zeilen geladen werden.

Auf der Grid-Achse funktionieren die Dinge genau so, wie Sie es im Grid-Layout erwarten. Sie können Elemente mehrere Tracks umspannen lassen und dabei in der automatischen Platzierung verbleiben, indem Sie das span-Schlüsselwort verwenden. Elemente können auch anhand der Linienbasierenden Positionierung platziert werden.

In diesem Beispiel spannen zwei der Elemente zwei Tracks, und die Masonry-Elemente arbeiten um sie herum.

Dieses Beispiel enthält ein Element, das eine Positionierung für Spalten aufweist. Elemente mit einer definitiven Platzierung werden positioniert, bevor das Masonry-Layout stattfindet.

In Browsern die kein Masonry unterstützen, wird stattdessen die reguläre Grid-Auto-Platzierung verwendet.

• grid-auto-flow für die Steuerung der automatischen Grid-Platzierung
• Native CSS Masonry Layout in CSS Grid