Examples of Webflow CSS Grid

Hey @quarshcreative in my Grid Image Reveals above I used .img__grid as my main class for each image’s grid then add combo classes for style variations such as .img__grid .altand so on. This allowed me to adjust rows, columns, and sizing for each variation. Does this answer your question? If not, start a new post and we can discuss further.

Here’s another example of grid in action from @Aaron for the Digital Bake.

3 Likes

https://preview.webflow.com/preview/srey-88ee306efcb867682a73ef6f7349bc46?utm_source=srey-88ee306efcb867682a73ef6f7349bc46&preview=7caa14074836a7e606ea7d6d47a6e53e

1 Like
1 Like
1 Like

It’s marvelous to see the mind-blowing things you’re all doing with CSS Grid! :clap: :heart:

CSS grid landing page tutorial

In this course, we’ll build a single-page landing page using CSS grid in the Webflow Designer. We’ll cover responsiveness in grid as it applies to each breakpoint: from desktop down to mobile portrait.

https://webflow.com/website/Airpockets-app-landing-page

1 Like

https://webflow.com/website/Perception-Health

https://webflow.com/website/thibautconsulting

https://webflow.com/website/Boss-Style-20

https://webflow.com/website/Project-ADFOLKS

https://webflow.com/website/Shoalhaven-Homeless-Hub

https://webflow.com/website/The-Road-Goes-Ever-On

1 Like

https://webflow.com/website/Portfolio-of-Stefano-Peschiera

https://webflow.com/website/Portfolio-jo7etuxw

https://webflow.com/website/Greentech-A2i

1 Like

How to connect a CMS? What would the blocks also be different?