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!

[@prodbydissa]

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

[@MrRalphbro]

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

[@craciunlabs]

Really helpful, thank you!

[@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?

[@LeoCabral4]

Gostaria de saber como voces conseguem produzir videos tao bem elaborados... Muito bom mesmo.

[@joshuayu9121]

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

[@posterboyvicky]

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

[@Koyasi78]

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

[@HealthandSoundness]

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

[@othinielchigunwi]

Hi everyone 👋, So I'm having trouble with my grid layout in Webflow. I've created a 4-column by 3-row grid and added images, article titles, authors' names, publication dates, and categories (e.g., productivity). Replacing images works fine, but when I try to update the article title, date, author name, etc., everything breaks. The images move up, causing misalignment. I want everything to stay aligned at the top without breaking. This issue has been bugging me for weeks, and I can't find a solution. If anyone understands what I'm trying to say and has a solution, I would really appreciate it. Thanks, and happy creating 😊

[@LightslicerGP]

Vision pro tutorial soon?

[@lapridagaspar]

11:53 Anyone else thought 'everything is "as it was", that's because "style" changes cascade down...' was a pun for harry styles?

[@highradar13]

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."

[@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