CSS Grid Layout: Masonry-Layout aus purem HTML und CSS

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Codepen-User Kseso überzeugt mit einem einfachen, aber eindrucksvollen Anwendungsfall für CSS Grid, indem er aus purem HTML und CSS ein schickes Masonry-Layout schafft.

CSS Grid Layout ist endlich flächendeckend verfügbar

Dass das CSS Grid Layout eine wichtige Designfunktion für moderne Websites darstellt, ist schon seit seiner nahezu flächendeckenden Verfügbarkeit in allen modernen Browsern klar. Als perfekte Ergänzung zu Flexbox bietet CSS Grid die Möglichkeit, ganze Seiten zu gestalten, wo Flexbox eher auf einzelne Element-Bereiche innerhalb der Seite begrenzt ist.

Inzwischen wird CSS Grid Layout nativ unterstützt. Eine Ausnahme stellt Opera Mini dar. Im Internet Explorer bedarf es des Prefixes ms. Gleiches gilt für Microsoft Edge in der aktuellen Version 15. Sowohl IE, wie auch Edge unterstützen trotz Prefix CSS Grid nicht vollständig. Ab Version 16 wird auch der aktuelle Redmonder Browser CSS diesen Mangel beheben. Wenn du es dir leisten kannst, Projekte ausschließlich für aktuelle Browser zu entwickeln, kannst du dann aus dem Vollen schöpfen.

Kseso ist ein überaus aktiver Grenzgänger, der gerne im Cutting-Edge-Bereich experimentiert. Meist fügt er entsprechend den Hashtag #impoCSSible an, um zu dokumentieren, dass er keine etablierte Standardlösung präsentiert.

Einfaches, aber universelles Masonry-Layout mit CSS Gris

Das Masonry-Layout, das Kseso in diesem Codepen präsentiert, dient als Inspiration, kann aber auch so eingesetzt werden. Es fehlen die erforderlichen Prefixes. Jedoch kannst du diese schnell selbst ergänzen, so lang ist der Code nicht.

Ebenso hat Kseso keinen Wert auf die Optimierung und exaktere Steuerung der Darstellung gelegt, was aber für viele Anwednungsfälle, wenn nicht sogar gewollt, jedoch mindestens ausreichend sein dürfte. Neben der Version aus purem HTML und CSS bietet Kseso eine weitere Variante an, in der er ein Javascript für das Lazy Loading, also das bedarfsgerechte Nachladen von Bildern, eingebunden hat. Für große Bildergalerien dürfte diese Lösung praxistauglicher sein.

Kseso hat noch weit mehr zu bieten

Es lohnt sich, Kseso auf Twitter zu folgen. Ebenfalls betreibt er einen Blog, der allerdings ausschließlich in spanischer Sprache zu lesen ist. Der Google Translator kann zwar im Ansatz helfen, kommt jedoch mit der Art, wie sich Kseso ausdrückt nur mittelgut zurecht. Interessant ist das Layout des Blogs. Es orientiert sich recht deutlich an Tweetdeck und Hootsuite und wird Social-Media-Fans gleich bekannt vorkommen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

Zu CSS Grid Layout publizierte Kseso übrigens bereits in 2015. Da war er seiner Zeit allerdings überdeutlich voraus. Ich verzichte hier auf die Einbindung von Source Code, da du unproblematisch alles direkt aus dem Codepen ziehen und sogar mit den Parametern experimentieren kannst. Nichts wie hin.

Übrigens: Jen Simmons zeigt dir in diesem Beitrag mit Video die Fähigkeiten des neuen CSS Grid Inspectors aus dem Firefox Nightly-Build. Den kannst du auf jeden Fall in diesem Zusammenhang gebrauchen.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

4 Kommentare auf "CSS Grid Layout: Masonry-Layout aus purem HTML und CSS"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Der Aysberg
Gast

Ich bin zwar seit 15 Jahren Webentwickler, aber das “Masonry-Layout” war mir bisher kein Begriff….

Florence Maurice
Gast

Jen Simmons hat diesen Rastertyp auch schon seit Längerem in ihrem Lab http://labs.jensimmons.com/examples/image-gallery-grid-1.html
Streng genommen ist es natürlich kein Masonry, weil es eben immer noch auf … einem Raster basiert – was ein “echtes” Masonry-Layout nicht tut. Aber wenn das Raster wesentlich feiner ist als die Ausmaße der Bilder, fällt das nicht so auf. Auf jeden Fall ist es super cool, das ist wahr. Und wichtig dabei die Eigenschaft object-fit, damit die Bilder nicht verzerrt werden.

Florence Maurice
Gast

… und noch eine kleine Anmerkung. Hab das Beispiel gerade noch mal im IE getestet. Das funktioniert leider dort nicht, obwohl die Präfixe dabei sind. Der Grund: Die Anordnung setzt auf die automatische Platzierung der Grid-Items und das versteht der IE10+/Edge <16 nicht, weil das in der damaligen Spezifikation nicht vorgesehen war …. Für den IE müsste man alle Items explizit einer Position zuweisen, dann hätte man aber nicht mehr die Magie. Ich glaub, in solchen Fällen ist es besser, ganz auf die Grid-IE-Implementierung zu verzichten und eher eine allgemeine andere Fallbacklösung zu versuchen …

Kay
Gast

Ich finde es immer wieder gut auch mal über den Tellerand zu blicken. Kseo kannte ich noch nicht und folge ihm jetzt auch auf Twitter. Danke für den Tipp!

wpDiscuz