Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't inline-grid work in Safari?

I am working on a WordPress gravity form and used inline-grid for the layout.
It works perfectly in Firefox and Chrome.

But when it comes to Safari, display: inline-grid does not work.
Although display: inline-block works.


Run the following code snippet in Safari to see what I am talking about.

.item {
  width: 50px;
  height: 50px;
  background-color: lightgray;
  display: inline-block;
  margin: 5px;
}

.item2 {
  width: 50px;
  height: 50px;
  background-color: gray;
  display: inline-grid;
  margin: 5px;
}
<div class="item"></div>
<div class="item"></div>
<hr>
<div class="item2"></div>
<div class="item2"></div>
like image 640
Ricky Dam Avatar asked Jun 20 '17 17:06

Ricky Dam


People also ask

Does grid work in Safari?

CSS Grid is only supported as of Safari 11.1 on Desktop and Safari 10.3 on iOS.

Is CSS Grid all browsers compatible?

Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.

Is it safe to use CSS grids?

It is definitely safe to use.

Is CSS Grid production ready?

Conclusion. CSS Grid is awesome and it is ready for production 🚀. You don't need to wait until no one is using IE11 anymore to use CSS Grid for basic layouts.


1 Answers

Safari supports CSS Grid Layout

desktop -- from version 10.1
ios -- from version 10.3

http://caniuse.com/#feat=css-grid

Probably you're using not a very fresh Safari.

BTW, on my desktop v. 10.1.1 your code works as expected.

like image 192
Kosh Avatar answered Oct 21 '22 03:10

Kosh