Ein schönes Grid Layout in Webflow bauen | CSS Grid Beginner Tutorial

In diesem Anfänger Webflow Tutorial bauen wir zusammen ein schönes Grid Layout. Gerade bei einem variablen magazinartigen Design kann man das CSS Grid sehr gut einsetzen und dank Webflow visuell aufbauen, ohne den komplizierten Code im Hintergrund schreiben zu müssen.
Das Blog Layout ist komplett an das Webflow CMS angebunden und steht dir als kostenloses Template in meinem Webflow Account zur Verfügung.
Als Responsive Lösung auf Desktop habe ich die Wizardry Methode von Timothy Ricks eingebunden. Auf Tablet und Mobile skaliert das Design natürlich auch wunderbar runter.

Hier gehts zu Teil 2, in dem wir das Grid mit ein paar Animationen versehen:
https://youtu.be/-AQyI3VMCoA

Ergebnis anschauen:
https://beautiful-grid.webflow.io

Im Webflow Designer öffnen und kostenlos klonen:
https://webflow.com/website/Free-Grid-Design-Template

---------------------------------------------

► Mein Webflow Online-Kurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
https://bit.ly/webflow-online-kurs

---------------------------------------------

Über diesen Link Webflow kostenlos testen:
http://bit.ly/webflow-testen *

Webflow schnell und einfach lernen:
https://webflow-lernen.de/tutorials

---------------------------------------------

// TIMESTAMPS

00:00 – Intro
02:38 – Blog Header
04:37 – Aufbau Blog Teaser Item
12:08 – Aufbau mit dem CMS verknüpfen
14:52 – Warum wir mehrere Collection Listen brauchen
15:39 – Das Design von einem Collection List Item unterscheiden
17:44 – Grid Design
24:18 – Design Feinabstimmung
25:57 – Smarte Lösung: Bilder im Grid die Lücken füllen lassen
29:21 – Border filigranere machen
30:11 – Responsive Design Desktop
32:31 – Responsive Design Tablet & Mobile
36:20 – Ergebnis

#webflow #websitedesign #webdesign

---------------------------------------------

// PATREON

► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://bit.ly/patreon-seite

----------------------------------------------

// MEIN WEBDESIGN UND FREELANCER BLOG

► https://jonasarleth.com/blog

----------------------------------------------

// SOCIAL MEDIA

► Instagram: https://instagram.com/jonasarleth
► Dribbble: https://dribbble.com/jonasarleth
► LinkedIn: https://www.linkedin.com/in/jonasarleth

----------------------------------------------

// MEIN WEB & DESIGN PODCAST

► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► Pocket Casts: https://jonasarleth.com/pocketcasts
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
► Stitcher: https://jonasarleth.com/stitcher

----------------------------------------------

* Affiliate Links