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