How to make a ludo board using grid-template-areas?

Question

I am making a ludo board using css-grid. If you don't know ludo please see the following image.

In the image only consider the three horizontal rows between the square. I want to do it with grid-template-areas or any other better way. I created 45 <div> for the central horizontal set of rows and wrapped all of those inside a grid container. I have all classes according to the color of cell. Then I gave grid-area of some name to each of the classes and then used that in grid-template-areas. But unfortunately nothing is showing up.

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

If I remove grid-area property the cells show up in the order they are placed in html and obviously I can change order of those to get the desired result but I don't want to do it like that. I am looking for some better ways.

From what i see, you can chop the board into a 3x3 grid of just 9 div elements, then you can nest the rest of the specific elements, other than that i don't really know, 45 direct grid children all requires different layouts might give you a headache let alone some weird behaviors in different browsers. — Rainbow, May 04 '21 at 19:28
your grid-template-areas is wrong, because it is not as flexible as a normal class in html — MaxiGui, May 04 '21 at 19:41

MaxiGui · Answer 1 · 2023-07-04T09:05:26.947

Your grid-template-areas is wrong, if you inspect you will see that. It is wrong because you cannot link & apply grid the way you are doing, as it would be a normal display.

On the demo below I made only the 2 first square to show you the way.

DEMO

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

How to make a ludo board using grid-template-areas?

1 Answers1

DEMO