我想创建一个像 
这样的大富翁游戏版。这个版有如下特点：
- 四个角是方形的，比其他格子要大；
- 每行文字都倾斜一定角度。
我的基本html结构如下：
- 版面
- 第一行
- 方块1
- 方块2 ...
- 第一行
我成功地使用了grid-template-areas创建了基本结构。但是，我遇到的问题是无法根据需要旋转每行的方块。
我创建了一个只有每行3个方块的基本代码片段。第一行向右倾斜，所有其他行都倾斜得不对。第二行倾斜90deg，第三行倾斜180deg，第四行倾斜270deg。
我试过使用writing-mode和transform:rotate()，但它们似乎并没有起作用，或者我使用方法不对。请帮我找到正确的方法，我将不胜感激。
*{
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>
div时，它无法固定在主 div 内部。 - Maheer Ali