#vuecember2020 #frontend #css

Natives Masonry

Auch in diesem Jahr muss der Weihnachtsmann wieder zahlreiche Geschenke auf seinem Schlitten verstauen, ohne dabei die Übersicht zu verlieren. Dabei kann er aber schon bald auf technische Unterstützung zurückgreifen. In Level 3 der CSS Grid Layout Spezifikation ist eine native Masonry Implementierung angedacht. Doch wie kann das bei der Ordnung auf dem Schlitten helfen?

Was ist Masonry?

Masonry hat sich als Begriff für eine versetzte Kacheloptik etabliert, bei der die Inhalte möglichst platzsparend angeordnet sind. Dabei bleibt die natürliche Leserichtung von links nach rechts erhalten.

Der aktuelle Stand der Technik

Stellen wir uns ein paar schöne Geschenke vor, natürlich im Browser. Diese könnten wir nun einfach floaten lassen, um den Platz besser auszunutzen. Hierbei zeigen sich jedoch große Lücken und der Schlitten ist schnell voll. Dies ist alles andere als optimal.

masonry1.png

Es gibt einige CSS basierte Ansätze, um die Elemente platzsparender anzuordnen. Diese erfordern oft aber sehr viel Markup und ziehen einige Probleme nach sich. Beispielsweise kann über CSS Columns eine mehrspaltige Anordnung erzeugt werden, die Leserichtung ist dabei aber vertikal.

css-columns.png

So kommt der Weihnachtsmann natürlich nicht in der korrekten Reihenfolge an die passenden Geschenke.

Natives Masonry im Einsatz

Nun können wir entweder auf JavaScript Bibliotheken zurückgreifen oder wir fügen folgenden Code ein:

.sleigh %7B
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-rows: masonry;
%7D

Neu ist hierbei nur der Wert für grid-template-rows, jedoch mit großem Effekt:

masonry2.png

Die Geschenke füllen den Platz optimal aus und auch die korrekte Leserichtung bleibt erhalten. Responsive ist es natürlich auch.

Derzeit befindet sich Masonry für das CSS Grid noch im Entwurfsstadium. Der aktuelle Draft ist hier einsehbar.

Im Firefox Nightly Browser gibt es aber bereits heute die Möglichkeit es auszutesten. Die geflaggte Implementierung lässt sich folgendermaßen aktivieren:

  • about:config in die Adresszeiele eingeben
  • in der Liste nach layout.css.grid-template-masonry-value.enabled suchen
  • Wert auf true setzen

Vielleicht steht uns dieses Feature ja bald in allen wichtigen Browsern zur Verfügung. Bis es soweit ist, muss der Weihnachtsmann allerdings noch auf JavaScript Lösungen oder den Firefox Nightly Build zurückgreifen.

Quellen: