Demos

CSS Gap Decorations demos

This directory contains demos that showcase the use of CSS Gap Decorations, a feature proposal by the Microsoft Edge team to draw line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts.

Demos

• Burger Menu - burger-menu.html
• Calendar - calendar.html
• Daily CSS News - daily-css-news.html
• Guitar Fretboard - guitar-fretboard.html
• Notebook - notebook.html
• Personal site - personal-site.html
• The Daily Oddity - the-daily-oddity.html

Developer playground

• CSS Gap Decorations playground - playground.html

Try the feature

To try the feature, follow these steps:

1. Open a Chromium-based browser, such as Microsoft Edge or Chrome, and make sure the version is at least 139.

2. In the browser, open a new tab and go to about:flags.

   In Microsoft Edge, you end up at edge://flags.

3. In the Search flags box, enter Experimental Web Platform features.

4. Set the Experimental Web Platform features flag to Enabled.

5. Click the Restart button.

   The browser restarts, with the flag applied.

Share feedback

To share feedback, please open an issue on the MSEdgeExplainers repository.

This site is open source. Improve this page.