Overlap content in a responsive grid

Create a responsive grid layout with overlapping content. Change the overlap order while keeping the layout accessible.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

By default, content inside a grid span a single cell and wrap automatically when other content is spanned multiple cells. You can manually-place grid children so they stay pinned in a specific cell and aren't affected by the spanning of other content. This is helpful when you want to overlap grid children.

In this video we show you how to create a responsive grid layout with overlapping content. We'll also show you how to change the overlap order while keeping the layout accessible.

To create this layout:

  1. Add and configure a grid element
  2. Add in your content
  3. Set up the overlap and overlap order
  4. Edit the grid to tweak spacing
  5. Make everything responsive for all sorts of devices
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback