CSS grid: release 2.0

We’ve dramatically expanded what’s possible with grid in Webflow, and made some changes to how grid layout works.

Barrett Johnson
May 21, 2019
Announcements

Today, we’re releasing a massive update and series of improvements to grid layout that will make designing responsive, CSS grid-powered layouts easier than ever.

Context: CSS grid 1.0

The launch of CSS grid back in October 2018 took layout in Webflow a dramatic step forward. But it also introduced two issues:

  1. Clunky responsive design workflows. Manually positioned grid children needed to be adjusted for each breakpoint, and changes to the grid itself across breakpoints required further repositioning of items to fit within the new set of rows and columns.
  2. No collection list support. Without a governing logic about how to distribute children within the parent grid, there was no way to support a CMS-driven collection list, ecommerce product list, or search result list.

Thankfully, today’s release resolves both of these issues — and introduces a ton more power to CSS grid layout in Webflow.

Grid 2.0: Making responsive design even easier

There’s a lot included in today’s release, and nearly all of it makes designing responsive, grid-powered layouts substantially easier. Let’s take a look at each new feature, exploring some of the new layouts and possibilities each unlocks.

Autoflow positioning: a new default

Small but mighty: a new “auto” position option for grid items.

Most notably, today’s release introduces a new, default mode for grid child positioning: autoflow. When a grid child is set to autoflow positioning, it will automatically be placed into the next available grid cell when added to a grid. (Manual positioning, which lets you “pin” grid children in a specific, fixed position in the grid, can still be applied by holding Shift as you drag elements into the grid, or by toggling the grid child’s settings in the style panel.)

When set to autoflow positioning, elements move to the next available cell when items before them are resized.

Autoflow positioning is particularly helpful when adjusting your design for smaller devices, since you can simply remove columns and watch grid children simply bump down to the next available cell — no adjustments per-device needed.

Delete columns at different devices and watch grid children flow into the next available cell.

Collection and ecommerce product list support

Autoflow positioning now makes it easy to create grids of dynamic, content-driven lists like CMS collection and ecommerce product list, as well as search result pages and grids of static content.

Grid layout: now playing nice with content driven layouts.

Auto-fit (also known as “responsive magic”)

Along with the introduction of autoflow positioning for grid items comes support for auto-fit, which allows you to set minimum and maximum dimensions for rows and columns, then have the grid automatically generate rows and columns as needed to follow those rules and distribute content. This makes it possible to build a layout that works across every single screen size — no per-breakpoint adjustments needed.

With auto-fit, rows and columns are created as needed, and content grids flow across all screen sizes.

Dense

While autoflow positioning and auto-fit make it easier to create responsive layouts that work across all devices, the “automatic” nature of how they create rows and columns can create awkward gaps when spanned grid items don’t fit perfectly into the grid.

Enabling “dense” on your grid fills empty cells by redistributing content.

Enabling the “dense” option on your grid will attempt to fill these gaps by redistributing elements to empty cells. This is a particularly useful option when you’ve got a grid that mixes autoflow and manually positioned items, as dense can fill in spaces created as the autoflow elements attempt to flow around a manually positioned item.

A note on accessibility

While using dense can be a handy option to ensure your layout doesn’t look too funky at any particular screen width, it should be noted that dense can create accessibility problems for people who use screen readers, since it often arranges content in an order that doesn’t match your source HTML.

Where to learn grid

If you still haven’t played around with grid, or you’re looking to get up to speed on the latest updates that come with this 2.0 release, the best place to go is our newly updated grid course on Webflow University.

Grab this cloneable layout from our showcase page, and check out our course on Webflow University for a tutorial rebuild video of this layout.

We’ve also got a series of cloneable, grid-powered layouts that you can grab from our showcase page — some that are brand new and come with tutorial rebuild videos, and others that showcase the manual positioning features from our initial release.

What’s coming next

Today’s release completes our major work on adding CSS grid support to Webflow, but we’ve still got a few pieces still in development: most notably, support for grid areas.

Coming soon: define grid areas to place large groups of elements together — and easily reposition them across devices.

Defining grid areas will allow you to build your layout before adding content, and then once you’ve added content, will make it easier to rearrange large groups of elements on different breakpoints. We’re still in the final development and testing phase for areas, but be on the lookout for more on that soon.

What are you going to build with these new features? To join the conversation about this release, chime in on our forum post or leave a comment below.

Barrett Johnson

Product marketing @webflow. Design, history, and music enthusiast.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.