Сетка CSS не работает в Safari

Question

Я пытаюсь выяснить, что-то не так, что я делаю, или CSS-сетка не поддерживается в Safari (MacOS или iOS), хотя везде говорят, что это поддерживается?

Я пробовал что-то вроде этого:

  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>

Отлично работает в Chrome, FF и даже на последних версиях Edge, но не в Safari 10.0.1

Answer 1

CSS Grid поддерживается только в Safari 11.1 для настольных ПК и Safari 10.3 в iOS.

Ссылка: https://caniuse.com/#search=grid