Span sparkling water flavors in a ROYGBIV grid

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Span sparkling water flavors in a ROYGBIV grid

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

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form