Overlap content in a responsive grid

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!
Overlap content in a responsive grid

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.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form