Kevin Powell - Community•2y ago

CSS Layout Issue on different browsers

Hey! I have made a masonry layout in CSS in a React project using the column property. It looks perfect on Firefox but not on other browsers. What could be the issue? Live Site: https://my-unsplash.fly.dev/ Code: https://github.com/husnain214/my-unsplash Just click on the Demo button.

My Unsplash

Web site created using create-react-app

GitHub

GitHub - husnain214/my-unsplash

Contribute to husnain214/my-unsplash development by creating an account on GitHub.

5 Replies

~MARSMAN~•2y ago

I think it's because it's still experimental feature

Kevin Powell•2y ago

Like Marsman said, it's only supported by Firefox, the other browsers dont support masonry yet (and probably won't for awhile)

husnain214•2y ago

thank you! I thought it was a really old property but I was wrong I guess. Is there a way I can create a fallback for other browsers using the @supports media query? Caniuse shows great browser support for the column property.

Kevin Powell•2y ago

FF has supported it for year, lol. its mostly because they had subgrid, which is level 2 of the grid spec, nd then this is level 3. Since no one else had subgrid, they never could go to this. If columns works, you could totally use that, and then:

.thing {
  columns: 3; /* or whatever you need, and everything else here */
}

@supports ( grid-template-rows: masonry; ) {
  .thing {
    columns: 1; /* gets rid of the  columns */
    display: grid;
    grid-template-rows: masonry;
  }
}

.thing {
  columns: 3; /* or whatever you need, and everything else here */
}

@supports ( grid-template-rows: masonry; ) {
  .thing {
    columns: 1; /* gets rid of the  columns */
    display: grid;
    grid-template-rows: masonry;
  }
}

husnain214•2y ago

@Kevin Thanks a lot Kevin! I really love your content. Thanks for being a great teacher. 🤩

Gaming

Programming

CSS Layout Issue on different browsers