I have a number of locations on my website where I've been faking a masonry layout (you know, like how Pinterest lays things out) using CSS grid columns. They work, but they're not what I'm looking for.

I've been waiting for the official masonry grid display to land, and discovered that it's now an experimental feature in Chrome-based browsers that you can enable (it's been available for Firefox for awhile).

But... how can I check to see if the feature exists? Turns out CSS already has that covered, via the @supports selector:

@supports (display: masonry) {
    .container {
        display: masonry;
    }
}

@supports not (display: masonry) {
    .container {
        display: grid;
    }
}

I love that CSS is fully embracing the idea of progressive enhancement! I've used feature testing in JS for a long while, but hadn't realized this was now baked in to CSS, too.