LoginGet started — it’s free
Made in Webflow

Free Grid Design Template (CMS ready)

Clone in Webflow722
Jonas Arleth's avatar
by Jonas Arleth
site profile thumbnail


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 🖤
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
gridgrid designgrid layoutcssgridcustom gridblogblogsiteblogtemplatetemplatecloneableblog templatemasonryblogoverview3danimationanimatedmasonrycssgridbox

More by Jonas Arleth

See profile
View details
Responsive full-screen Webflow navigation menu
© 2022 Webflow, Inc. All rights reserved.