title: CSS Grid not working in Safari
body: <p>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?</p>
  
  <p>I tried something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  ul {
        list-style-type: none;
        text-align: center;
    }
    .grid {
          display: grid;
          grid-gap: 20px;
      }
      .grid-4 {
       grid-template-columns: repeat(4, auto);
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ul class="grid grid-4"&gt;
          &lt;li class="grid-item"&gt;
              &lt;img src="http://via.placeholder.com/350x150"/&gt;
              &lt;a href="/"&gt;Browse Online, Buy in Store&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="grid-item"&gt;
              &lt;img src="http://via.placeholder.com/350x150"/&gt;
              &lt;a href="/"&gt;Browse Online, Buy in Store&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="grid-item"&gt;
              &lt;img src="http://via.placeholder.com/350x150"/&gt;
              &lt;a href="/"&gt;Browse Online, Buy in Store&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="grid-item"&gt;
              &lt;img src="http://via.placeholder.com/350x150"/&gt;
              &lt;a href="/"&gt;Browse Online, Buy in Store&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine in Chrome, FF and even on latest Edge, but not on Safari 10.0.1</p>