如何使用grid-template-areas制作LUDO板？

Question

我正在做一个使用css-grid的ludo板。如果你不了解ludo，请看下面的图片。

​

​

在图像中，只考虑正方形之间的三个水平行。我想用grid-template-areas或任何其他更好的方法来做。我为中间的水平行集创建了45个<div>，并将所有这些行都包装在一个网格容器中。我所有的课程都是根据单元格的颜色。然后，我为每个类指定了某个名称的grid-area，然后在grid-template-areas中使用它。但不幸的是，什么都没有出现。

​

.middle {
   display: grid;
   grid-template-columns: repeat(15, 50px);
   grid-template-rows: repeat(3, 50px);
   background-color: burlywood;
   width: 750px;
   height: 150px;
   grid-template-areas:
      "b r b b b b - - - b b b y b b"
      "r r r r r r - - - y y y y y y"
      "b b r b b b - - - b b b b y b";
}

.b {
   grid-area: b;
   height: 50px;
   width: 50px;
   background-color: ivory;
}

.r {
   height: 50px;
   width: 50px;
   grid-area: r;
   background-color: red;
}

.y {
   height: 50px;
   width: 50px;
   grid-area: y;
   background-color: yellow;
}

.g {
   height: 50px;
   width: 50px;
   grid-area: g;
   background-color: green;
}

<div>
   <div class="middle">
      <div class="r"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="r"></div>
      <div class="g"></div>
      <div class="g"></div>
      <div class="g"></div>
      <div class="g"></div>
      <div class="y"></div>
      <div class="y"></div>
      <div class="y"></div>
      <div class="y"></div>
      <div class="y"></div>
      <div class="y"></div>
      <div class="y"></div>
   </div>
</div>

​

如果我删除grid-area属性，单元格将按照它们在html中的放置顺序显示，显然我可以更改它们的顺序来获得想要的结果，但我不想这样做。我在寻找一些更好的方法。

Answer 1

你的grid-template-areas是错的，如果你检查一下就会发现。这是错误的，因为你不能以你正在做的方式链接和应用网格，因为这是一个正常的显示。

在下面的演示中，我只做了2个第一个方块来给你指路。

演示

​

.middle {
   display: grid;
   grid-template-columns: repeat(15, 50px);
   grid-template-rows: repeat(15, 50px);
   background-color: burlywood;
   width: 750px;
   /*height: 150px;*/
   grid-template-areas:
      "r r r r r r . . . g g g g g g"
      "r2 . . . . r3 . . . g2 . . . . g3"
      "r4 . . . . r5 . . . g4 . . . . g5"
      "r6 . . . . r7 . . . g6 . . . . g7"
      "r8 . . . . r9 . . . g8 . . . . g9"
      "r10 r10 r10 r10 r10 r10 . . . g10 g10 g10 g10 g10 g10";
   
}
/*.middle > div{
   height: 50px;
}*/

.r {
   grid-area: r;
}
.r2 {
   grid-area: r2;
}
.r3 {
   grid-area: r3;
}
.r4 {
   grid-area: r4;
}
.r5 {
   grid-area: r5;
}
.r6 {
   grid-area: r6;
}
.r7 {
   grid-area: r7;
}
.r8 {
   grid-area: r8;
}
.r9 {
   grid-area: r9;
}
.r10 {
   grid-area: r10;
}
.r, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10{
  background-color: red;
}

.g {
   grid-area: g;
}
.g2 {
   grid-area: g2;
}
.g3 {
   grid-area: g3;
}
.g4 {
   grid-area: g4;
}
.g5 {
   grid-area: g5;
}
.g6 {
   grid-area: g6;
}
.g7 {
   grid-area: g7;
}
.g8 {
   grid-area: g8;
}
.g9 {
   grid-area: g9;
}
.g10 {
   grid-area: g10;
}
.g, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10 {
   background-color: green;
}

<div>
   <div class="middle">
      <!--<div class="r"></div>-->
      <div class="r"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g"></div>
      <div class="r2"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="r3"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g2"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g3"></div>
      <div class="r4"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="r5"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g4"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g5"></div>
      <div class="r6"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="r7"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g6"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g7"></div>
      <div class="r8"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="r9"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g8"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g9"></div>
      <div class="r10"></div>
      <div></div>
      <div></div>
      <div></div>
      <div class="g10"></div>
   </div>
</div>

​