why wont grid-template-area work? everything should be set correctly

Question

My divs dont follow the grid template areas set here. while inspecting on firefox is just assumes its " zero one two three four" " five six ... etc"

the classes are for divs within div.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";
}

score 0 · Accepted Answer · answered Apr 29 '22 at 17:43

Your definition of the grid template areas is OK, but when you come to set the grid-area for an item you have used quotes which are not required.

.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;
}

<div class="spaces">
  <div class="zero">0</div>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
  <div class="seven">7</div>
  <div class="eight">8</div>
  <div class="nine">9</div>
  <div class="ten">10</div>
</div>

See MDN

why wont grid-template-area work? everything should be set correctly

1 Answers1