为什么同一段CSS代码在部分Web IDE及浏览器中运行异常

我编写的代码预期呈现效果如下：

但该代码在Codepen、JSFiddle、Liveweave等服务中均出现异常，甚至在Stack Overflow上也无法正常运行！
不过这段代码在repl.it平台及本地运行时完全正常。
目前仅Liveweave抛出expected rbrace at line错误，我运行其他示例代码时未遇到该问题，请问是什么原因导致该现象？
我已将代码上传至上述平台，完整代码如下：

(S)CSS Masterclass #

CSS代码 #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-auto-rows: 100px;
  margin-bottom: 30px;
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

.grid:first-child {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid:last-child {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>(S)CSS Masterclass</title>
</head>
<body>
  auto-fill
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  auto-fit
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

出现该运行差异的核心原因有两点：

1. 在线代码运行平台的运行逻辑和本地/完整项目环境不同
   Codepen、JSFiddle这类在线预览平台会自动生成完整的HTML外层结构（包含<html>、<head>、<body>标签），如果直接把完整HTML文档全部贴入平台的HTML输入区域，会导致HTML结构重复嵌套，触发解析异常。同时你在HTML中添加的styles.css引用在这类平台无法生效，平台不会单独生成对应的CSS文件，CSS代码需要单独填写到平台的CSS输入区才能被正常加载。repl.it和本地环境是完整的项目运行环境，支持单独的CSS文件加载，也不会额外生成外层HTML结构，所以运行正常。
2. 代码存在隐性转义错误
   你提交的代码片段中，第二个grid的第4个item标签存在引号转义异常，直接复制带实体转义的代码贴入在线平台时，部分严格的语法校验器会将这个HTML语法错误误判为CSS语法异常，进而抛出expected rbrace at line的报错。

• 往在线平台提交代码时，HTML区域仅粘贴<body>标签内部的内容，不要包含外层的<html>、<head>、<body>标签，CSS代码单独粘贴到平台对应的CSS输入区域，删除HTML里对styles.css的引用。
• 检查所有HTML标签的属性引号，把错误的转义引号替换为正常的双引号，保证所有标签语法正确。

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