I have been staring at this for an hour why doens't it work, I just want the grid to be as the template. I have read the docs, searched stackoverflow and tried everything.
<body>
<div class="container">
<div class="*">wall</div>
<div class=".">path</div>
<div class="S">start</div>
<div class="T">end</div>
</div>
<script src="./script.js" type="module" defer></script>
</body>
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"* * * * * * * * * * * . * "
"* S . . . . . * * . * . T "
"* * * * * . . . . . * . * "
"* * * * * . * * * . * . * "
"* * * * * . * * * * * . * "
"* * * * * . * * * * * . * "
"* * * * * . . . . . . . * "
"* * * * * . * * * * * * * "
"* . . . . . . . . . * * * "
"* . * * * * * * . . . * * "
"* . . . . * * * * * * * * "
"* * * * * * * * * * * * * ";
width: 92.3vmin;
height: 100vmin;
}
.\* {
grid-area: "*";
}
.\. {
grid-area: ".";
}
.S {
grid-area: "S";
}
.T {
grid-area: "T";
}
