Die Live-Vorschau sieht nicht wie CSS-Layout-Generator-Code aus ⇐ CSS

[Anonymous]

Ich bin ein Neuling in HTML und CSS und habe angefangen, einen CSS-Rastergenerator für das Layout meiner Website zu verwenden. Laut der Website (https://layout.bradwoods.io/customize) sollte mein Raster so aussehen, da ich den Code direkt von der Website kopiert habe. Stattdessen sieht die Live-Anzeige der von mir verwendeten HTML-Editoren völlig zerknittert aus. Wie kann ich das beheben?

Code: Select all

1
2
3
4
5



.layout {
width: 100%;
gap: 1em;
display: grid;
grid:
"header header header" auto
"leftSide body rightSide" 1fr
"footer footer footer" auto
/ auto 1fr auto;
}

.header { grid-area: header; background-color:pink; }
.leftSide { grid-area: leftSide; background-color:pink; }
.body { grid-area: body; background-color:pink;  }
.rightSide { grid-area: rightSide; background-color:pink;  }
.footer { grid-area: footer; background-color:pink; }