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?

Frontend Masters logo

Laying out designs on the web with CSS has gotten a lot more powerful in recent years. CSS grid, flexbox, and container queries are incredibly powerful tools for that, and we have a complete learning course on them from Jen Kramer.

7-Day Free Trial

Leave a Reply

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

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.