Create a responsive grid layout with content that span multiple cells, and let the grid automatically fill empty cells with dense.
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, 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:
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 [↗]
Something went wrong while submitting the form. Please contact firstname.lastname@example.org