0

I have this code that is supposed to look like this. enter image description here

BUT, this is broken on services like Codepen, JSFiddle, Liveweave etc. EVEN on Stackoverflow!!! They are all broken here.

However, it is working fine on repl.it or when I run it locally.

I see only Liveweave raising an errorlike expected rbrace at line .. but I did not run into this trouble when running other examples. Why would this be the case?

I linked the code to above services but here is the code

(S)CSS Masterclass 

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>
Leonard
  • 2,978
  • 6
  • 21
  • 42
  • The HTML you add in most of the editors is placed in the body. And most of the editors also add additional things to the `body`. And due to how error correction in browsers works, those will remove the `body`, `head` and `html` elements you provided, as those are not valid in the body, and places their children in the actual `body` element. And that results in your `.grid` elements not being the first/last child. – t.niese Sep 04 '21 at 14:11
  • No problem on Stackblitz, demo : https://stackblitz.com/edit/web-platform-bnnqhf?file=index.html – MB_ Sep 04 '21 at 15:46

0 Answers0