时间戳

首页 > 解决方案 > 为什么这个 CSS 在某些 Web IDE 或浏览器中会损坏？

html - 为什么这个 CSS 在某些 Web IDE 或浏览器中会损坏？

问题描述

我有这个应该看起来像这样的代码。 在此处输入图像描述

但是，这在Codepen、JSFiddle、Liveweave等 服务上被破坏了。甚至在 Stackoverflow 上！他们都在这里坏了。

但是，它在repl.it或我在本地运行时运行良好。

我只看到 Liveweave 引发类似错误的expected rbrace at line.. 但在运行其他示例时我没有遇到这个问题。为什么会这样？

我将代码链接到上述服务，但这里是代码

(S)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 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>

标签： htmlcsscss-grid

解决方案

推荐阅读