My div elements are not aligning with the grid template areas specified in the CSS. When inspecting in Firefox, it shows as "zero one two three four", "five six ... etc."
The classes mentioned apply to divs within the container div with a class of "spaces".
.spaces{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 100px);
grid-template-areas: "zero ... six seven eight"
"one ... five ... nine"
"two three four ... ten";
}
.zero{
grid-area: "zero";
}
.one{
grid-area: "one";
}
.two{
grid-area: "two";
}
.three{
grid-area: "three";
}
.four{
grid-area: "four";
}
.five{
grid-area: "five";
}
.six{
grid-area: "six";
}
.seven{
grid-area: "seven";
}
.eight{
grid-area: "eight";
}
.nine{
grid-area: "nine";
}
.ten{
grid-area: "ten";
}