CSS Grid Repeat not working in Safari on mobile

Question

As far as I know, CSS Grid is supported by Safari as of last month. However, when I load a page with a mesh container, my elements do not dynamically repeat - they occupy the entire width of the container.

 .selection-container {
     margin: 50px;
     display: grid;
     grid-template-columns: repeat(3, auto);
     background: rgba(20, 20, 20, 0.6);
     border-style: inset;
     border-width: 2px;
     border-color: red;

 }

My html looks like this:

<div id="categories-container"  v-show="selectedCategory==''" class="selection-container">      
<div v-for="(val, key) in categories" :key=key @click="selectedCategory=key">
    <f7-card :title="key" role="button" class="category"></f7-card>
</div>      
</div>

Is there any step that I am missing?

Answer 1

Even if Safari supports CSS Grid Layout with 10.1:

Safari does not yet support inline and outsize with grid properties such as grid-template-rows "(or grid-template-columns)

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