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.

https://webflow.com/website/whitespace-grid

https://webflow.com/website/newspaper-grid

https://webflow.com/website/overlapping-grid

https://webflow.com/website/camera-pricing-grid

https://webflow.com/website/Nintengrid-Pixel-Art-made-with-Grid

https://webflow.com/website/Piet-Mongrid

https://webflow.com/website/planet-grid

https://webflow.com/website/spacex-grid

https://webflow.com/website/Spider-Man-built-in-CSS-Grid

https://webflow.com/website/smiley-grid

Be inspired, happy designing!

14 Likes

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!!

2 Likes

https://webflow.com/website/Event-One-Pager

3 Likes

Non-Embed Grid Playground
https://preview.webflow.com/preview/grid-playground?utm_source=forum&preview=7d673be1addcd79c52cdb2bba0efed5a&empty=false

1 Like

https://webflow.com/website/Space-Jam-Grid

http://grid-effect.webflow.io/

https://webflow.com/website/grid-mouseover-gradient/

https://webflow.com/website/golf-course

2 Likes

https://webflow.com/website/Rastersysteme

https://webflow.com/website/grid-based-animation

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!

https://webflow.com/website/japanese-grid

https://webflow.com/website/Super-Mario-Bros-CSS-Grid

Adding my own - Marvel Comics - CSS Grid + Clip-path - Webflow!

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
https://webflow.com/website/rlcs-redesign-concept

http://rlcs-redesign-concept.webflow.io

1 Like

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

1 Like

@LEEYO_9623

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!

3 Likes

https://webflow.com/website/grids-and-veggies

https://webflow.com/website/Never-Sit-Dull-Design-Canvas

1 Like

https://webflow.com/website/Color-Blocks-in-CSS-Grid

https://webflow.com/website/shabaniddrisutm

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!

http://grid-image-reveals.webflow.io
https://webflow.com/website/Grid-Image-Reveals
ezgif-2-7e7418d08b47

Rebound by Graphic Owls
https://webflow.com/website/Grid-Tricks

4 Likes

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?