如何使用CSS网格制作垄断板？ [英] How to make a monopoly board using css grid?

查看：54 发布时间：2020/10/12 18:56:39 html css css-grid

本文介绍了如何使用CSS网格制作垄断板？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个像。棋盘中有以下功能

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

角落是方形的，比其他盒子大

每行的文本都面对特定角度。

我的基本html结构如下

My basic html structure is below

董事会

第1行

第1列

第2层
...

我成功地使用 grid-template-areas 创建了基本结构。我面临的问题是我无法根据需要旋转每行的图块。

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.

我创建了一个基本的代码段，每行只有3个图块。第一排面对直角，其他所有排错了角度。 90deg 第二行。 180deg 第三行。和 270deg 用于第四行。

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.

我尝试使用书写模式和 transform：rotate（），但是它不起作用，或者我使用的方式错误。请帮助我找到正确的方法。我将非常感激

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>

推荐答案

这是执行此操作的一种方法。

Here's one way to do this.

我更改了HTML标记，并且未使用 grid-template-areas 属性。每个网格项目都按照它们在HTML标记中的放置顺序自动放置在网格中。

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.

它是一个 4 x 4 网格，其中第一列和最后一列的大小为120px，中间两列的大小分别为75px 。同样，第一行和最后一行的大小为120px，中间的两行各为75px。

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>

7 x 7 网格并使用 writing-mode 属性的方法。这种方法与前一种方法的唯一区别是，它使用 writing-mode 属性正确地将小文本从第2行到第6行对齐。

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>

这里是 7 x 7 板采用第一种方法

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>

这篇关于如何使用CSS网格制作垄断板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用CSS网格制作垄断板？ [英] How to make a monopoly board using css grid?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用CSS网格制作垄断板？ [英] How to make a monopoly board using css grid?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭