Overlap content in a responsive grid

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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

Table of contents

Continue learning

Oops! Something went wrong while submitting the form.

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top