Dieter Petereit 11. August 2017

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

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.

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

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+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. 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!

  2. … 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 …

  3. 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.

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück