Overlap content in a responsive grid

Create a responsive grid layout with overlapping content. Learn how to change the overlap order while keeping the layout accessible.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
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

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.