Build CSS grid layouts in Webflow - Web design tutorial
HTML-код
- Опубликовано: 20 май 2024
- Enter CSS grid: perfect for both frontend developers and designers eager to build two-dimensional layouts for websites and interfaces. From constructing grids in Webflow to nesting content within cells, this lesson covers the basics of using grid on the web. Learn to manually position elements for creative overlaps and make your designs responsive across devices, including tablets and various mobile orientations. Whether you're arranging a simple section or integrating dynamic CMS content, we unlock the magic of CSS grid, making complex layouts approachable and fun.
In this lesson, we’ll cover CSS grid in four parts:
00:00 - Introduction
00:56 - Create and configure a grid
04:50 - Nest content inside a grid cell
06:22 - Manual positioning and overlapping content
11:05 - Responsiveness with grid layouts
13:10 - Recap
Read about it → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
/ webflow
I love the details and caveats explained in this updated version of the grid tutorial. Great video!
Totally agree here, amazing video. Looking forward to more of these videos, with edge cases explained so well. Nice work 🔥🔥
This is explained so extremely well en clear to understand, hats off 💯
Great tutorial, keep up the good work! Loved it!
I don’t even use webflow a lot and yet this made so much sense
Really helpful, thank you!
Great video :)
Regarding overlapping grid: which element is on top depends on either where it is in the navigator or if you set it to relative/add z-index, etc. The latter wasn't mentioned in the video: is that still considered best practice?
Very interesting ❤❤
Gostaria de saber como voces conseguem produzir videos tao bem elaborados... Muito bom mesmo.
I have a question. How do I redirect users to homepage after signing up?
is it possible to create a dynamic grid layout using multi-image field of a collection item?
I don't have kilos on my Webflow, do I need to pay extra to use that unit type? 🙃
that vision pro media screen size was missing ! :P :P ...............hope webflow shall make immersive experiences for VR too one day!
Vision pro tutorial soon?
Hey, Can you help me? How to make a seller account on Webflow
+ Firebase with Live chart, user analytics, total sales, etc. Please help me Please because I need it soon please help me, pleaseI hope you will help me, I hope the next video will be on this topic please upload the video early, I will wait for it
When's the target date for this?: "We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos."