问题描述
我遇到了行为不端的网格的问题。对于上下文，我有一个单页应用程序，我试图将其转换为大屏幕上的网格布局。我的 HTML 有一个包含整个页面的“主网格”div：
<body>
<div class="main-grid">
...
</div>
<script ... > </script>
</body>
@include media-md {
.main-grid {
display:grid;
grid-template-columns: minmax(1em,1fr) repeat(3,minmax(10rem,30rem)) minmax(1em,fr);
gap: 2em;
}
我遇到的问题有两方面 第一：这个scss编译成这个：
.main-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(1em,1fr) (minmax(10rem,30rem))[3] minmax(1em,fr);
grid-template-columns: minmax(1em,fr);
gap: 2em;
}
我从研究中了解到 IE 使用括号语法而不是重复，但 VSCode 似乎不理解这一点。它在 [3] 处引发错误，并导致 chrome 和 FF 也将我的常规网格选项灰显。
我之前删除了这些并输入了每一列，但 Chrome 和 FF 仍然无法识别此代码。有人知道这是怎么回事吗？以防万一我不够清楚：Here's a live shot of my devtools for reference on the wonky grid and grayed-out styling;
解决方法
如果您将鼠标悬停在浏览器开发工具中的黄色警告标志上，则会显示代码变灰的原因。
对我来说，这似乎是两个不同的问题：
(1) -ms-grid-columns 变灰完整，因为属性的 NAME = '-ms-grid-columns'（不是值）在该浏览器中未知，即在 FF 中是正确的，铬合金。 （括号 [3] 似乎不是原因）。
(2) grid-template-columns: minmax(1em,1fr) repeat(3,minmax(10rem,30rem)) minmax(1em,fr); 由于属性的 VALUE 错误而变灰。所以代码在浏览器中根本无法运行。
第二个问题的原因似乎是使用单位 fr 没有价值。尝试将其更改为 1fr 应该可以工作。
只是对单位 fr 的评论： 由于兼容性，我不太确定现在使用该单位是否是一个好主意。浏览器似乎不太支持该单元，canIuse.com 将其标记为实验性的...也许您想自己看看：