Kuratierte Linksammlung für Webdesigner und -entwickler.
CSS Grid

CSS Grid-Experimente

Vor ein paar Wochen, als Jules Forrest (@julesforrest) bei Credit Karma angefangen hatte, gab ihr ein Freund das Buch „The Intelligent Lifestyle Magazine“ als Willkommensgeschenk. Es ist ein unglaubliches Buch voller cleverer und komplizierter Druckdesignarbeiten.

Kurze Zeit später hatte Jules ein paar Layouts mit ihrem Handy gescannt und beschlossen, das lange Wochenende damit zu verbringen, die Spreads so nachzubilden, wie sie es mit CSS umsetzen konnte. Sie hatte sich dazu mit Jen Simons‘ schnellen Möglichkeit, CSS Grid auszuprobieren, auseinandergesetzt . Dort wird ist ein schneller Weg beschrieben, CSS Grid sehr einfach umzusetzen.

Anzeige

Nachdem sie mit einigen CodePen-Beispielen herumgespielt hatte, begann Sie mit dem ersten und einfachsten Layout. Für dieses erste Experiment war Jules nicht allzu besorgt, es responsive zu gestalten, sie wollte sich erstmal nur mit den Konzepten vertraut machen.

Während das Grid definitiv das Auslegen des Inhalts erleichtert hat, dachte sie, dass es wahrscheinlich auch mit Flexbox machbar ist. Also wählte sie etwas komplizierteres. Aber schaut selbst.

CSS Grid-Experimente mit CodePen-Verlinkungen

julesforrest.com

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige