CSS Exclusions and Grid Layout

There is a tiny little specification that originally started life linked to the Shapes specification, the original Exclusions and Shapes draft defined both shape-inside and shape-outside along with properties wrap-flow and wrap-through. These properties were to create Exclusions.

The Exclusions and Shapes specification was split. The shape-outside property went into Level 1 of CSS Shapes and is now implemented in some browsers. The shape-inside property, was moved to Level 2 of that module. The properties that create exclusions were moved to their own specification. At the current time the only browsers with support for exclusions are Internet Explorer 10, 11 and Edge.

What is an exclusion?

In CSS we can create text wrapped around elements by using floats. If we float an element left or right the following content will wrap around it. However there is no way to float an item right in the middle of some content with text flowing around it.

This is what exclusions do.

The specification doesn’t create a new method of positioning elements, so needs combining with a positioning method. It becomes especially interesting when combined with the upcoming CSS Grid Specification.

In order to take a look I need to use Edge, and therefore the “old” prefixed version of CSS Grid which is implemented in that browser. I’ve added the new syntax as well. If you have IE 10, 11 or Edge then you can take a look at the CodePen examples I have linked.

In the CodePen you can see that I have created a Grid on wrapper which has two child elements, the content in a div with a class of inner and an image which has a class of exclusion. The content I have stretched to cover the entire grid, but the image I have positioned on the grid, it will then sit on top of the content.

By setting wrap-flow: both on the image however it becomes an exclusion. The text knows it is there and flows round both sides of the item.

Exclusions demo 1

View the CodePen for demo 1

You can get pretty creative with this.

Exclusions demo 2

View the CodePen for demo 2

As a quick update to the original post here is an example of using media queries to change the display on viewport width. On narrow windows the exclusions insert the images into the content at full width, at wider windows we have content wrapped on the internal side and the image appearing pulled out of the content.

All of the content is in one article, not broken up by the images in the source.

Here is the CodePen for the responsive example

Grid and Exclusions make sense together

With CSS Grid we can use auto placement to position child elements each in a cell of the grid, enabling a display like this example.

What the addition of exclusions would give us is the ability to define a grid and place items on it – be that images, content, perhaps advertising elements that we don’t want to actually break up an article to insert. Then flow content naturally around that.

No signals

Currently there appears to be no activity around Exclusions. You can see the Chrome Platform Status details here which also lists what other browser vendors and the development community are thinking about this feature. I think it is something we will find useful once Grid ships. I’d love to see other use cases and demos!

87 Comments

pnkr March 18, 2016 Reply

neither of these demos work on firefox or chrome.

Rachel Andrew March 18, 2016 Reply

@pnkr that’s correct, which is why in the blog post it says:

“In order to take a look I need to use Edge, and therefore the “old” prefixed version of CSS Grid which is implemented in that browser. I’ve added the new syntax as well. If you have IE 10, 11 or Edge then you can take a look at the CodePen examples I have linked.”

Sheldon March 18, 2016 Reply

Very interesting. I really wish we had this kind of thing back in the ’90s! I know it would not help much in my current endeavors; internally facing enterprise type projects. I do remember a time when I did a lot of public facing things and this would have been a great help.

Tony Finch October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Zeno Popovici October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Miriam Suzanne October 14, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #ruhrjs17 buff.ly/2ymSFn2

Marianne Hegedus October 14, 2017 Reply

My new book – The New CSS Layout – out this week from @abookapart #ruhrjs buff.ly/2yoSBTN

Kurang Manis October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Werther 🎹🕹️ October 14, 2017 Reply

My new book – The New CSS Layout – out this week from @abookapart #ruhrjs buff.ly/2yoSBTN

Greg Whitworth October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Christof October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Gerard James October 14, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #ruhrjs17 buff.ly/2ymSFn2

Rattleknife Design October 14, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Michael Whyte October 14, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #ruhrjs17 buff.ly/2ymSFn2

Kurosnape@doroshi ~# October 15, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Andre Pan October 15, 2017 Reply

A post about CSS Exclusions. I’d really like to have Exclusions support in more browsers buff.ly/2ghdsBQ #ruhrjs17 https://t.co/TLby

Daniel Maslowski October 16, 2017 Reply

My new book – The New CSS Layout – out this week from @abookapart #ruhrjs buff.ly/2yoSBTN

Ryan Mulligan October 16, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #ruhrjs17 buff.ly/2ymSFn2

Leave a Reply