Editorial Layouts, Exclusions, and CSS Grid

A little while back at An Event Apart Chicago, I chatted to Rob Weychert about a grid use case he felt the spec couldn’t solve. He has now written that use case up, which you can read on his blog - Editorial Layouts, FLoats, and CSS Grid.

At the time I thought that this sounded like an Exclusions use case, and I’ve taken his demo and created a version which uses CSS Exclusions. To see the demo working you will need to use Edge.

A CodePen version of the example at the end of Rob’s article can be found here.

For the Exclusions version, both the image and the text need to be direct children of the grid. We then position the image using CSS Grid, and the content. This will result in the image and content overlapping, and is what you will see if you visit the demo in any browser other than Edge.

Exclusions1

This is where the exclusions comes in, we apply -ms-wrap-flow: both to the image as the wrap-flow property is prefixed in Edge. As the image comes first in the source I also needed to give it a higher z-index than the content. In Edge the text will now clear the image on all sides.

Exclusions2

View the demo.

The neat thing about the Exclusions version is that Exclusions are not limited to floating up and left or up and right. You could place the image anywhere on the grid and wrap the text around it. This would make creating thngs like pullquotes far easier too.

Exclusions3

View the demo

Exclusions would be such a great addition to our set of layout tools if we had wider implementation. For more see and earlier post here on CSS Exclusions and Grid Layout.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.