Span grid 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 [↗]