我试图弄清楚我正在做的事情是否有问题，或者 Safari（MacOS 或 iOS）是否不支持 CSS 网格，尽管他们到处都说支持 CSS 网格？
我尝试过这样的事情：
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 上运行不佳
仅从桌面版 Safari 11.1 和 iOS 版 Safari 10.3 开始支持 CSS 网格。
Ref: https://caniuse.com/#search=grid https://caniuse.com/#search=grid
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
