2

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

enter image description here

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.

Improve this question
2
  • 1
    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. Commented May 4, 2021 at 19:28
  • 1
    your grid-template-areas is wrong, because it is not as flexible as a normal class in html Commented May 4, 2021 at 19:41

1 Answer 1

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.