Overlap content in a responsive grid
Create a responsive grid layout with overlapping content. Change the overlap order while keeping the layout accessible.
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:
- Add and configure a grid element
- Add in your content
- Set up the overlap and overlap order
- Edit the grid to tweak spacing
- Make everything responsive for all sorts of devices