CSS 网格重复在移动设备上的 Safari 中不起作用

Question

据我所知，截至上个月，Safari 已支持 CSS Grid。然而，当我加载带有网格容器的页面时，我的元素不会动态重复——它们占据了整个容器的宽度。

 .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;

 }

我的 html 看起来像这样:

<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>

有什么我遗漏的步骤吗？

Answer 1

即使 Safari 从 10.1 开始支持 CSS 网格布局:

Safari does not yet support intrinsic and extrinsic sizing with grid properties such as grid-template-rows" (or grid-template-columns)

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