Streaming live at 10am (PST)

Examples of Webflow CSS Grid


#1

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!


CSS Grid sample site very jerky?
CSS Grid sample site very jerky?
#2

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


#3

#4

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


#5

#6

http://grid-based-animation.webflow.io


#7

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!


#8

http://grid-cube.webflow.io


#9

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

Cloneable, have fun ^^


#10

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


#11

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


#12

Now Cloneable

http://rlcs-redesign-concept.webflow.io
https://youtu.be/nX-NShnyS4Y


#13

#14

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


#15

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


#16

thanks i’ll be looking forward for that


#17

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

Loving this stuff!


#18

#19

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


ezgif-2-7e7418d08b47

Rebound by Graphic Owls


#20

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?