CSS Gap Decorations

Chris Coyier Chris Coyier on

Microsoft is working ongap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc).

To see them as of right now, you need to open Chrome Canary with a flag. Not one of the about://flags flags, but a command-line flag. I had never done that before, but it basically means drilling into the .app to launch from inside it with the flag.

Command (on my Mac)
/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSGapDecoration

It all really makes me want to be able to style grid areas without needing to place an HTML element there to do it.

Wanna learn modern CSS layout?

Leave a Reply

Your email address will not be published. Required fields are marked *

$966,000

Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.