How to make a monopoly board using css grid?

Question

I want to create a monopoly board like . There are following features in the board

• The corner are square shaped and bigger than other boxes
• The text of each row is facing a specfic angle.

My basic html structure is below

• Board
  • Row 1
    • Tile 1
    • Tile 2 ...

I am successful in creating the basic structure using grid-template-areas. The problem I am facing is that I can't rotate the tiles of each row according to the need.

I have created a basic snippet which have only 3 tiles per row. The first row is facing right angle all other rows are at wrong angle. 90deg for second row. 180deg for third row. and 270deg for fourth row.

I have tried using writing-mode and transform:rotate() but it doesn't work or maybe I am using it wrong way. Please help me to find the correct way. I will be really thankful

*{    box-sizing: border-box;  }  #board {     display: grid;     /*first and last row and column are bigger than others*/     grid-template-columns: 100px repeat(2, 70px) 100px;     grid-template-rows: 100px repeat(2, 70px) 100px;          /*a, b, c, d are 4 rows and o is center*/     grid-template-areas:        "c c c d"        "b o o d"        "b o o d"        "b a a a";  }  #center {     grid-area: o;  }  .row {     display: flex;  }  .tile {     display: flex;     flex-direction: column;     border: 1px solid;     height: 100%;     width: 100%;  }  .tile-color {     flex: 3;     background: red;     border: 1px solid;  }  .tile-name {     flex: 6;  }  .tile-price {     flex: 3;  }    /*Flex directions are used to give the tiles correct order*/  #row-0 {     grid-area: a;     flex-direction: row-reverse;  }  #row-1 {     grid-area: b;     flex-direction: column-reverse;  }  #row-2 {     grid-area: c;     flex-direction: row;  }  #row-3 {     grid-area: d;     flex-direction: column;  }    /*To make the corner tiles bigger and square*/  .row > .tile:nth-child(1){    flex: 0 0 100px;  }

<div id="board">     <div id="center"></div>          <!--Row 1-->     <div class="row" id="row-0">        <div class="tile">           <div class="tile-name">Go</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 1</div>           <div class="tile-price">Price 1</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 2</div>           <div class="tile-price">Price 2</div>        </div>     </div>          <!--Row 2-->     <div class="row" id="row-1">        <div class="tile">           <div class="tile-name">Just visiting</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 3</div>           <div class="tile-price">Price 3</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 4</div>           <div class="tile-price">Price 4</div>        </div>     </div>          <!--Row 3-->     <div class="row" id="row-2">        <div class="tile">           <div class="tile-name">Free Parking</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 4</div>           <div class="tile-price">Price 4</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 5</div>           <div class="tile-price">Price 5</div>        </div>     </div>          <!--Row 4-->     <div class="row" id="row-3">        <div class="tile">           <div class="tile-name">Jail</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 6</div>           <div class="tile-price">Price 6</div>        </div>        <div class="tile">           <div class="tile-color"></div>           <div class="tile-name">Tile 7</div>           <div class="tile-price">Price 7</div>        </div>     </div>  </div>

Answer 1

Here's one way to do this.

I have changed the HTML markup and haven't used grid-template-areas property. Each grid item is placed in the grid automatically in the order they are placed in the HTML markup.

Its a 4 x 4 grid where first and last columns are 120px in size and middle 2 columns are 75px each. Similarly first and last rows are 120px in size and middle 2 rows are 75px each.

To rotate grid items, i have created individual classes and applied appropriate rotation class on individual grid items which need to be rotated.

* {    box-sizing: border-box;  }    .board {    display: grid;    grid-template-columns: 120px repeat(2, 75px) 120px;    grid-template-rows: 120px repeat(2, 75px) 120px;    justify-content: center;  }    .lg-box {    text-align: center;    background: #999;    border: 1px solid;    overflow: hidden;  }    .sm-box {    width: 100%;    background: blue;    background: red;    height: 100%;    position: relative;    border: 1px solid;    overflow: hidden;  }    .sm-box div {    background: #fff;    height: 85%;    width: 100%;    display: flex;    flex-direction: column;    justify-content: space-between;    text-align: center;    position: absolute;    bottom: 0;    padding: 5px;  }    .lg-box-centered {    background: #fff;    grid-row: 2 / span 2;    grid-column: 2 / span 2;  }    .rot-180 {    transform: rotate(180deg);  }    .lg-rot,  .lg-box-centered {    height: 100%;    display: flex;    align-items: center;    justify-content: center;  }    .rot-135 {    transform: rotate(135deg);  }    .rot-45-reverse {    transform: rotate(-45deg);  }    .rot-45 {    transform: rotate(45deg);  }    .rot-135-reverse {    transform: rotate(-135deg);  }    .rot-90 {    transform: rotate(90deg);  }    .rot-90-reverse {    transform: rotate(-90deg);  }    .sm-box .rot-90,  .sm-box .rot-90-reverse {    position: absolute;    left: 12px;    top: -12px;    width: 75px;    height: 100px;  }    .sm-box .rot-90-reverse {    left: initial;    right: 12px;  }

<div class="board">    <div class="lg-box">      <div class="lg-rot rot-135">Just Visiting</div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 5</span>        <span class="price">Price 5</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 6</span>        <span class="price">Price 6</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-135-reverse">Jail</div>    </div>          <div class="sm-box">      <div class="rot-90">        <span class="title">Title 4</span>        <span class="price">Price 4</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 7</span>        <span class="price">Price 7</span>      </div>    </div>    <div class="lg-box-centered">center</div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 3</span>        <span class="price">Price 3</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 8</span>        <span class="price">Price 8</span>      </div>    </div>              <div class="lg-box">      <div class="lg-rot rot-45">Just Visiting</div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 2</span>        <span class="price">Price 2</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 1</span>        <span class="price">Price 1</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-45-reverse">Go</div>    </div>  </div>

Here's an alternative approach with 7 x 7 grid and uses writing-mode property. Only difference between this approach and the previous one is that it uses writing-mode property to properly align text within small boxes from row number 2 to row number 6.

* {    box-sizing: border-box;  }    .board {    display: grid;    grid-template-columns: 120px repeat(5, 75px) 120px;    grid-template-rows: 120px repeat(5, 75px) 120px;    justify-content: center;  }    .lg-box {    text-align: center;    background: #999;    border: 1px solid;    overflow: hidden;  }    .sm-box {    width: 100%;    background: blue;    background: red;    height: 100%;    position: relative;    border: 1px solid;    overflow: hidden;  }    .sm-box div {    background: #fff;    height: 85%;    width: 100%;    display: flex;    flex-direction: column;    justify-content: space-between;    text-align: center;    position: absolute;    bottom: 0;    padding: 5px;  }    .lg-box-centered {    background: #fff;    grid-row: 2 / span 5;    grid-column: 2 / span 5;  }    .rot-180 {    transform: rotate(180deg);  }    .lg-rot,  .lg-box-centered {    height: 100%;    display: flex;    align-items: center;    justify-content: center;  }    .rot-135 {    transform: rotate(135deg);  }    .rot-45-reverse {    transform: rotate(-45deg);  }    .rot-45 {    transform: rotate(45deg);  }    .rot-135-reverse {    transform: rotate(-135deg);  }    .sm-box .rot-90,  .sm-box .rot-90-reverse {    height: 75px;    width: 85%;    writing-mode: vertical-rl;    position: absolute;    left: -10px;  }    .sm-box .rot-90-reverse {    transform: rotate(180deg);    right: 10px;  }

<div class="board">    <div class="lg-box">      <div class="lg-rot rot-135">Just Visiting</div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 11</span>        <span class="price">Price 11</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 12</span>        <span class="price">Price 12</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 13</span>        <span class="price">Price 13</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 14</span>        <span class="price">Price 14</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 15</span>        <span class="price">Price 15</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-135-reverse">Jail</div>    </div>          <div class="sm-box">      <div class="rot-90">        <span class="title">Title 10</span>        <span class="price">Price 10</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 16</span>        <span class="price">Price 16</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 9</span>        <span class="price">Price 9</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 17</span>        <span class="price">Price 17</span>      </div>    </div>    <div class="lg-box-centered">center</div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 8</span>        <span class="price">Price 8</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 18</span>        <span class="price">Price 18</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 7</span>        <span class="price">Price 7</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 19</span>        <span class="price">Price 19</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 6</span>        <span class="price">Price 6</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 20</span>        <span class="price">Price 20</span>      </div>    </div>          <div class="lg-box">      <div class="lg-rot rot-45">Just Visiting</div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 5</span>        <span class="price">Price 5</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 4</span>        <span class="price">Price 4</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 3</span>        <span class="price">Price 3</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 2</span>        <span class="price">Price 2</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 1</span>        <span class="price">Price 1</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-45-reverse">Go</div>    </div>  </div>

Here's a 7 x 7 board using first approach

* {    box-sizing: border-box;  }    .board {    display: grid;    grid-template-columns: 120px repeat(5, 75px) 120px;    grid-template-rows: 120px repeat(5, 75px) 120px;    justify-content: center;  }    .lg-box {    text-align: center;    background: #999;    border: 1px solid;    overflow: hidden;  }    .sm-box {    width: 100%;    background: blue;    background: red;    height: 100%;    position: relative;    border: 1px solid;    overflow: hidden;  }    .sm-box div {    background: #fff;    height: 85%;    width: 100%;    display: flex;    flex-direction: column;    justify-content: space-between;    text-align: center;    position: absolute;    bottom: 0;    padding: 5px;  }    .lg-box-centered {    background: #fff;    grid-row: 2 / span 5;    grid-column: 2 / span 5;  }    .rot-180 {    transform: rotate(180deg);  }    .lg-rot,  .lg-box-centered {    height: 100%;    display: flex;    align-items: center;    justify-content: center;  }    .rot-135 {    transform: rotate(135deg);  }    .rot-45-reverse {    transform: rotate(-45deg);  }    .rot-45 {    transform: rotate(45deg);  }    .rot-135-reverse {    transform: rotate(-135deg);  }    .rot-90 {    transform: rotate(90deg);  }    .rot-90-reverse {    transform: rotate(-90deg);  }    .sm-box .rot-90,  .sm-box .rot-90-reverse {    position: absolute;    left: 12px;    top: -12px;    width: 75px;    height: 100px;  }    .sm-box .rot-90-reverse {    left: initial;    right: 12px;  }

<div class="board">    <div class="lg-box">      <div class="lg-rot rot-135">Just Visiting</div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 11</span>        <span class="price">Price 11</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 12</span>        <span class="price">Price 12</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 13</span>        <span class="price">Price 13</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 14</span>        <span class="price">Price 14</span>      </div>    </div>    <div class="sm-box rot-180">      <div>        <span class="title">Title 15</span>        <span class="price">Price 15</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-135-reverse">Jail</div>    </div>          <div class="sm-box">      <div class="rot-90">        <span class="title">Title 10</span>        <span class="price">Price 10</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 16</span>        <span class="price">Price 16</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 9</span>        <span class="price">Price 9</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 17</span>        <span class="price">Price 17</span>      </div>    </div>    <div class="lg-box-centered">center</div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 8</span>        <span class="price">Price 8</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 18</span>        <span class="price">Price 18</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 7</span>        <span class="price">Price 7</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 19</span>        <span class="price">Price 19</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90">        <span class="title">Title 6</span>        <span class="price">Price 6</span>      </div>    </div>    <div class="sm-box">      <div class="rot-90-reverse">        <span class="title">Title 20</span>        <span class="price">Price 20</span>      </div>    </div>          <div class="lg-box">      <div class="lg-rot rot-45">Just Visiting</div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 5</span>        <span class="price">Price 5</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 4</span>        <span class="price">Price 4</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 3</span>        <span class="price">Price 3</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 2</span>        <span class="price">Price 2</span>      </div>    </div>    <div class="sm-box">      <div>        <span class="title">Title 1</span>        <span class="price">Price 1</span>      </div>    </div>    <div class="lg-box">      <div class="lg-rot rot-45-reverse">Go</div>    </div>  </div>