Discover the best grid websites created by professional designers. Get inspired and start planning your perfect grid web design today!

Winner of Honorable Mention and Site of the day on Awwwards 
and awarded the Mobile Excellence award 

Tutorial On Hero section.
https://www.youtube.com/watch?v=yWq81qwpOCI&t=311s

Having fond memories of The Goonies, I decide to create a website that re-lives those magic moments. This site is jam packed full of amazing animations and interactions so please do explore the full site. 

Enjoy.

The Goonies

A Webflow ready, 12 column responsive flexbox grid system. Clone to get started!

12 Column Webgrid - Responsive

Responsive Flexbox 12 Column Grid

Freebie Editorial Project for the Webflow's community

----

Check the original version (The current version has been simplified):
https://em-design-freebie-v2.webflow.io/

My Folio:
https://emportfolio.webflow.io/

Editorial Freebie [Simplified]

Editorial Freebie [Free Version]

Hello webflow friends. I just launched my new site to showcase my growing role as a UX/UI designer and visual developer. When I first started freelancing about 4 years ago, I had created my site using Wordpress. I’ve been building stuff in Webflow now for the past 3 years for Fortune 100 and 500 companies and I finally got around to doing something for myself using CSS grid. 

It is a designer’s dream to being able to control every single pixel, padding, margin, animation for every breakpoint. 

Appreciate the "Like" 👍🏼

Poulos Collective

10 reusable modern CSS grid layouts inspired by tile patterns, along with 8 tasteful animations. Fully responsive and copy/paste ready for your next project!

CSS Grid Tiles

Super excited to finally release my new portfolio!

Moritz Petersen

Moritz Petersen Portfolio

This is the site for an illustration library called Open Doodles. It uses a combination of CSS Grid, Flexbox, two CMS collections, symbols, and hover interactions! Making it clonable in hopes others can use it as a starting point or as a way to learn new tricks.

Feel free to use this site and illustrations however you want. You can copy, edit, remix, or close the site and these images for any personal or commercial use.

If you have suggestions on how to improve the website, I would love to hear them!

Open Doodles

Open Doodles Site

Award-winning Electric Sooter company based in Luxembourg. 
12 custom templates with over 25 pages.

ujet tbt

UJET

Free sample of grid based ecomm store. Based on VW units for making it super responsive on larger devices.

Live site: ujjo.com

Ujjo

Ujjo - Ecommerce Site Rebuild

roknrol.studio

Webflow

Make the most of grid overlap for more creative layouts.

Overlapping grid

Follow along with the tutorials for this project

Part One (Desktop)
https://www.youtube.com/watch?v=3g6irf8c8lw

Part Two (Interactions and Responsiveness)
https://www.youtube.com/watch?v=wHz9Dp8UK1U

Figma to Webflow Tutorial (Final)

Figma to Webflow Tutorial (Completed)

Grid masterclass

Grid

My YouTube Webflow community asked for a nice grid design as a tutorial, so I recreated Vitaa Architects' Journal section as an example: have a look at the original website here: vitaarchitecture.com/journal

They didn't use css grid for their layout but I found it is a perfect use case for it. 
The grid contains several collection lists which are always limited to one item. This allowed me to create a more varied grid design.  

I also use a fluid design system. It scales down the grid on the desktop breakpoint from 1600px downwards. The custom CSS for this is written in the global-css embed.

Watch the tutorial here: https://youtu.be/9plbrIo4lfM

🖤

Free Grid Design Template (CMS ready)

Hi All, 

It's been a while and I wanted to put something together as a little starter template. 

CSS Grid with Flexbox and open menu / about section.

Storm®

Storm - Free Starter Template

I wanted to practice my webflow skill and decide to share to the community :)
Cms / Grid 2.0 / Flexbox / Animation...
I focused on desktop version.
Credits to : http://martinmroc.dribbble.com/

Architects

Presentation rooms / architecture

Very contemporary! Another website, another draft and experiment with my so called "grid" style. Added custom cursors, accordion, sticky containers, lottie burger, etc.

Still working on it – feel free to clone.

contemporary

Clone: Grid Style Website Draft (cursor / sticky / accordion / lottie)

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.

Hopefully you enjoy digging around the project and feel free to clone. Cheers!

Discover .css-73fekg{text-transform:capitalize;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}grid websites built by the Webflow community

Discover grid websites built by the Webflow community