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.
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.
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.
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.