5

As far as I know, CSS Grid is supported by Safari as of last month. Yet, when I load a page with a grid container, my items aren't dynamically repeated -- they take up the whole container width.

 .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 some step I'm missing?

David J.
  • 1,753
  • 13
  • 47
  • 96

1 Answers1

0

Even if Safari supports CSS Grid Layout since 10.1:

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

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

Yann Simon
  • 81
  • 1
  • 8
  • 2
    What does that sentence mean? Does it mean Safari doesn't support the properties `grid-template-rows` and `grid-template-columns`? Does it mean that certain values, or perhaps certain units, are not supported on those properties? Or does it mean that a specific behavior, achievable through the use of those properties, is not yet implemented? – Tom Sep 17 '17 at 03:51