Demos

CSS Gap Decorations demos

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

Demos

• Burger Menu (source: burger-menu.html)
• Calendar (source: calendar.html)
• Daily CSS News (source: daily-css-news.html)
• Guitar Fretboard (source: guitar-fretboard.html)
• Notebook (source: notebook.html)
• Personal site (source: personal-site.html)
• Personal site (upgraded) (source: personal-site-upgraded.html)
• The Daily Oddity (source: the-daily-oddity.html)
• Article Grid (source: article-grid.html)
• Calendar Week View (source: calendar-week.html)
• Dashboard Grid (source: dashboard-grid.html)
• Dynamic Items (source: dynamic-items.html)
• Settings List (source: settings-list.html)
• Split Screen (source: split-screen.html)

Playground

• CSS Gap Decorations playground (source: playground.html)

Try the feature

CSS Gap Decorations is available by default in Microsoft Edge 149 and above (or another Chromium-based browser with a matching version). Just open any of the demos above in a supported browser.

This site is open source. Improve this page.