SCSS 和网格模板列导致错误

【问题标题】：SCSS and grid-template-columns causing errorsSCSS 和网格模板列导致错误
【发布时间】：2022-06-11 00:17:39
【问题描述】：

我制作了一些响应式卡片，并在 SCSS 中使用了以下网格规则：

.cards{
place-items: center center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
padding: 20px;
grid-gap: 40px;
min-height: 500px;}

但是，当它被编译到我的 CSS 文件中时，它会产生下面的代码，其中包含一堆错误，可能是格式问题，但有任何解决方法的想法吗？

  .cards {
  place-items: center center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(400px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding: 20px;
  grid-gap: 40px;
  min-height: 500px;
}

【问题讨论】：

它把你的卡弄乱了吗？唯一的区别在于 MS 的编译方式

标签： html css sass grid

【解决方案1】：

我刚刚遇到了同样的问题。

我在This Github Issue 尝试了建议的解决方案，正如Dan503 在那个问题上所说，写-ms-grid-columns: (1fr)[2]; 的格式是写grid-template-columns: repeat(2, 1fr); 的旧IE 方式。

我测试只是将(1fr)[2]; 更改为repeat(2, 1fr)，它工作得很好。唯一的问题是，我找不到使编译器（在我的情况下我使用Live Sass Compiler v3.0.0）正确生成main.css 的解决方案。

即使手动将-ms-grid-columns 修复为正确的当前格式可以解决问题，但每当我运行编译器时，它只会再次以错误的方式编译它。

无论如何，我也在寻找解决方案，如果有的话。

注意：我发现的这个 Github Issue 是在 2018 年创建的，所以我印象深刻的是这仍然是 2022 年的事情。

【讨论】：