Span grid content

Create a responsive grid layout with content that span multiple cells, and let the grid automatically fill empty cells with dense.

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

By default, content in a grid is placed in individual grid cells. You can set any grid child to span multiple columns, or multiple rows, or multiple columns and rows.

As you span content, other content will auto-flow to make place for the spanned content. Sometimes, this may result in empty cells in your grid. Enabling the "dense" option will attempt to fill these spaces.

In this video

In this video, we show you how to create a responsive grid layout with content that span multiple cells. We also show you how to use the “dense” option to refill any empty cells that may result from spanning the content.

To create this layout, you'll:

  1. Place your content in a div block
  2. Turn this div block into a grid
  3. Adjust the grid columns
  4. Reposition your content inside the grid
  5. Span some of your content so they span multiple cells
  6. Adjust the grid and grid children on smaller breakpoints to make it responsive
A note on accessibility

While using dense can be handy option to ensure your layout doesn’t look too funky at any particular screen width, it should be noted that dense can create accessibility problems for people who use screen readers, since it often arranges content in an order that doesn’t match your source HTML.

Helpful resource: CSS Grid reordering and accessibility [↗]

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