Build CSS grid layouts in Webflow - Web design tutorial

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

[@timothyricks]

I love the details and caveats explained in this updated version of the grid tutorial. Great video!

[@GregDolan]

Totally agree here, amazing video. Looking forward to more of these videos, with edge cases explained so well. Nice work 🔥🔥

[@starktus]

Great tutorial, keep up the good work! Loved it!

[@MrRalphbro]

I don’t even use webflow a lot and yet this made so much sense

[@prodbydeasy]

This is explained so extremely well en clear to understand, hats off 💯

[@craciunlabs]

Really helpful, thank you!

[@Thetonmoyfacts-zp7ud]

Very interesting ❤❤

[@MarkFaamaoni]

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?

[@posterboyvicky]

that vision pro media screen size was missing ! :P :P ...............hope webflow shall make immersive experiences for VR too one day!

[@HealthandSoundness]

I have a question. How do I redirect users to homepage after signing up?

[@joshuayu9121]

is it possible to create a dynamic grid layout using multi-image field of a collection item?

[@kwesisalim]

I don't have kilos on my Webflow, do I need to pay extra to use that unit type? 🙃

[@LightslicerGP]

Vision pro tutorial soon?

[@AmnaGhafoor-gs1lm]

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