Why doesn't the built-in grid work in Safari?

Question

I am working on a WordPress gravity form and use the built-in grid for the layout.
It works great in Firefox and Chrome.

But when it comes to Safari, it display: inline-griddoesn't work.
Although it display: inline-blockworks.

---

Run the following code snippet in Safari to find out what I'm 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>

Run codeHide result

Answer 1

Safari supports CSS grid layout

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

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

You may be using not very fresh Safari.

By the way, on my desktop v. 10.1.1 your code works as expected.