Problem with @supports in sass

[raven666]

Hi! I’m trying to made a masonry grid with some pictures:

@use 'abstracts' as *
#master-header
  height: calc( 100vh - 10rem )
  @supports (grid-template-rows: masonry)
    display: grid
    grid-template-columns: repeat(3, 1fr)
    grid-template-rows: masonry
  .item    
    @include bgCover()
    &:nth-child(2)
      background-image: url(https://unsplash.com/photos/ToLMORRb97Q/download?force=true&w=640)
    &:nth-child(3)
      background-image: url(https://unsplash.com/photos/YQbJLyY0hFU/download?force=true&w=640)
    &:nth-child(4)
      background-image: url(https://unsplash.com/photos/TT-ROxWj9nA/download?force=true&w=640)
    &:nth-child(5)
      background-image: url(https://unsplash.com/photos/TyaZZhYkio0/download?force=true&w=640)
    &:nth-child(6)
      background-image: url(https://unsplash.com/photos/HqtYwlY9dxs/download?force=true&w=640)
  .featured
    background-image: url('https://unsplash.com/photos/AhfrA5VQNpM/download?force=true&w=640')
    grid-column: span 2
    grid-row: span 2

My problem is with this “@supports” rule:

@supports (grid-template-rows: masonry)
    display: grid
    grid-template-columns: repeat(3, 1fr)
    grid-template-rows: masonry

When I add “grid-template-rows” on “@supports” block my code doesn’t work. But if I delete this “@supports” block and use the “grid-template-rows: masonry” on my header it works just fine on chrome and firefox. What I’m doing wrong?

I’m using dart-sass, and testing on firefox developer and chromium, both from linux

[lasjorg]

Are you sure it is working?

If I look at caniuse it doesn’t seem to be supported by any browser except Firefox behind a flag. The MDN Masonry Layout article seems to suggest the same. Are you sure you are not just seeing the default fallback when removing the @supports?

[raven666]

yes you right, was the fallback what I was seeing . Didn’t see the “Invalid property value” on Inspector. Thanks!!