如何解决repeat创建6个1fr宽Grid列在Cengage平台失效问题

问题原因 #

你当前的grid-template-columns属性写法不符合CSS官方规范：repeat()是CSS内置函数，调用时必须传入两个必填参数：第一个是重复次数，第二个是需要重复的轨道尺寸值，你写的1fr repeat属于非法语法。
本地VSCode运行环境能生效是因为浏览器做了异常语法的容错补全，而Cengage平台的CSS校验规则更严格、运行环境的容错性更低，所以非法语法会直接失效。

修复方案 #

你需要实现6个宽度为1fr的网格列，直接把grid-template-columns属性值改为repeat(6, 1fr)即可，修改后完整代码如下：

body {
  width: 90%;
  min-width: 640px;
  max-width: 1024px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 30px 1fr 1fr 100px;
}

内容的提问来源于stack exchange，提问作者Nate