CSS grid is quickly becoming a web design standard, and has been adopted by Apple for grid-based layouts and galleries, by Slack for their user interface, and by Webflow for the Style panel and other interface components.
In this lesson, we’ll cover all the details related to CSS grid in practical, real-world examples that are only slightly contrived. Will grid change your world? Possibly. Will it create success in your personal and business relationships? Absolutely.
There’s a reason CSS grid is being adopted so rapidly and by notable frontend developers and thought leaders like Jen Simmons of https://www.layout.land/ and Jennifer Lame, who, according to Grímur, used CSS grid to edit the 2020 Christopher Nolan blockbuster, “Tenet” (in select theaters now).
In this lesson, we’ll cover CSS grid in six parts:
00:00 – Prologue
01:11 – Create and configure a grid
05:09 – The magical Div block
06:46 – Auto position (using an image grid)
10:54 – Manual position and overlapping (using a hero section)
16:01 – Reusable layouts (using grid template areas)
17:49 – Grids and responsive design (using breakpoints)
20:03 – Hedwig’s Theme
Learn more about CSS grid on Webflow University: https://university.webflow.com
———-
Get started with Webflow: https://wfl.io/2r7cVUW
https://webflow.com
Tweets by webflow
https://facebook.com/webflow