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