How to learn grid in Webflow
OK, we know that’s a lot to take in. Deep breaths on three: one, two, three … Ok, feel better?
Good. We got you. Here’s where you can go if you want to learn how to build with this new grid layout system in Webflow.
New course on Webflow University
Our new Webflow University course introduces you to the basic concepts of grid and helps you understand some of the new terms and units unique to CSS grid. But what you see now is only the start: we’ll be releasing eight example layout rebuild videos in the next few weeks, so keep an eye out for those.
Cloneable grid layouts
In addition to the course on Webflow University, we’ve built out four cloneable layouts that showcase some of the unique advantages that grid offers.
Feel free to clone these to reverse engineer how they’re built, reuse pieces, or get some inspiration.
Curious about grid but don't know where to start? Head over to our grid playground for a fun, interactive way to experience the power of grid. Here, you'll be challenged to recreate four iconic grid-based designs in Webflow. Because every good playground comes with fun — and games — right?
A bit of backstory: when we researched famous grid-based designs to recreate, we found a number of examples by women in design who have pioneered the use of grid within the industry.
As a female product manager in Silicon Valley, seeing their work and recreating it in the product we built was inspiring. Paula Scher, Susan Kare, Muriel Cooper, and Elaine Lustig Cohen each used grids as the foundation of some of their most famous works, and it’s an honor to celebrate them in our feature.
What’s next for grid in Webflow
While today’s release brings much of the CSS grid spec under your control in Webflow, we have a lot more planned. Here’s what’s still coming down the pipeline for grid.
Even more power from CSS grid
In the next few releases, we’ll be adding additional features like auto-placement, autofit, dense, and the repeat notation. These advanced features will make it even easier for you to create responsive designs that work almost like magic.
Support for grid on Collection lists
Because the number of items in a Collection list is dynamic, laying these items out as you might arrange a set of static elements … simply doesn’t work. For this reason, grid is not yet available as a display mode for Collection lists.
That said, we’re working on adding this support in, using the auto-placement algorithm in CSS grid, which automatically places grid children in successive grid cells and adds rows as needed to keep content flowing within the page.
More on-canvas grid controls
In addition to the on-canvas controls we’ve introduced for adding rows and columns, and resizing and repositioning grid children, we’ll soon release drag handles for resizing rows, columns, and gaps right on the canvas (for now, you can control these in the style panel on the right of the Designer).
Define your own grid areas
Grid areas allows you to create a visualization of your layout without having to add any content. This will make it much easier to create reusable grid layouts that can be made responsive without having to fuss with the position of each grid child.
What are you looking forward to building? Let us know in the comment, and share your creations on Twitter with the hashtag #WebflowGrid. We can’t wait to see what you create!