Examples of Webflow CSS Grid

CSS Grid has arrived (feature) in @webflow is here (blog)! and here (blog grid-templates)! and here (university)! maybe start here(marketing) and vote here (Product Hunt)!

Time to see it in action. Checkout these Webflow projects utilizing the new feature. After creating your own designs using grid share it here for the community to check it out.

Be inspired, happy designing!


I want that drag-to-resize interaction on the CSS Grid Playground site for the front-end of sites I build SOO bad! You could have SO much fun with that kind of interactivity!!


Non-Embed Grid Playground

1 Like

1 Like

My first play with Webflow’s CSS Grid feature. Saw an awesome display at a Japanese restaurant in the Houston airport and knew it was meant to be recreated in Webflow. The inspirational image is hidden in the grid.

Clone if you’d like to. Enjoy!

Adding my own - https://webflow.com/website/Marvel-Comics-CSS-Grid-Clip-path!

Cloneable, have fun ^^

1 Like

@jarda Great use-case for the grid. Love it! :man_superhero: :man_supervillain: :superhero: :supervillain:

@matthewpmunger :heart: Thank you! All credit goes to Dannie Vinther who came up with the idea, I just wanted to learn this new function in Webflow :slight_smile:

1 Like

Now Cloneable


1 Like

is it possible to have cms in a css grid structure?


It’s currently possible to place a grid inside of a cms collection item or place a collection list inside of a grid. However it is not yet possible to have the collection list be a grid. This is a feature that will be coming soon in an update to grid. See bottom of linked blog post.

1 Like

thanks i’ll be looking forward for that

My first grid layout :slight_smile: not responsive yet, you can check it out here - http://grid-food.webflow.io/

Loving this stuff!

1 Like

Here’s my own latest creation. Had an idea for animating some image reveals on page load. It utilizes the grid to customize each images load and hover effect for very different looks. The amazing thing is that adjusting the grid was the only change needed. All four images use the same interactions! Grid basically enhances the power of interactions to 11. Thanks in advance if you check it out or clone it!



Rebound by Graphic Owls


Super cool, pal!

I’ve been struggling with CSS class naming… It seems I have to create new Grid classes whenever a seperate Grid element requires an extra row or column. Which doesn’t seem super scaleable.

Any tips?