为什么网格模板区域不起作用？一切都应该正确设置

Question

我的 div 不遵循此处设置的网格模板区域。而在 Firefox 上检查只是假设它的“零一二三四” “五六……等”

类用于 div.spaces

内的 div

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

Answer 1

您对网格模板区域的定义没有问题，但是当您为某个项目设置 grid-area 时，您使用了不需要的引号。

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

见MDN

为什么网格模板区域不起作用？一切都应该正确设置

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

css

css-grid