Why doesn't inline-grid work in Safari?

Question

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>

Detrimental

I confirm that the lower blocks are one-atop the other in safari, whereas they are side-by-side in chrome. – Fistic

Answer 1

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.

Pola

That was it. I tried again on another Mac with Sierra and it worked just fine. I have El Capitan. By "not very fresh" you mean the version right before the current latest version? Haha. Anyways, thanks Kosh! – Detrimental