CSS Grid not working in Safari

Question

I'm trying to figure out if there is something wrong that I'm doing or is CSS grid not supported in Safari (MacOS or iOS) even though everywhere they say it's supported?

I tried something like this:

  ul {
      list-style-type: none;
      text-align: center;
  }
  .grid {
        display: grid;
        grid-gap: 20px;
    }
    .grid-4 {
 	   grid-template-columns: repeat(4, auto);
	}

    <ul class="grid grid-4">
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
        <li class="grid-item">
            <img src="http://via.placeholder.com/350x150"/>
            <a href="/">Browse Online, Buy in Store</a>
        </li>
    </ul>

It works fine in Chrome, FF and even on latest Edge, but not on Safari 10.0.1

Answer 1

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

Ref: https://caniuse.com/#search=grid