如何将屏幕拆分为多个大小相等的盒子，所有盒子都朝外？

Question

我有一个移动网站，旨在放置在 table 的中心，其框数等于 table 周围玩家的数量。上面是一系列分数，指的是每个球员的得分和面对那个球员。

我想我可能不得不使用网格来布置它们。我的问题是是否有更简单的内置方法？我正在努力结合网格和 transform: rotate(90deg).

不旋转：

旋转：

这是一个代码片段：

body { 
    font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif;
    display: grid;
    grid-template-areas: 
    "one two three six"
    "one two three six"
    "one four five six"
    "one four five six";
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 5px;
  height: 100vh;
  margin: 10px;  
}

one {
  background: #707070;
  grid-area: one;
  transform: rotate(90deg);
}

two {
  background: #707070;
  grid-area: two;
  transform: rotate(180deg);
}

three {
  background: #707070;
  grid-area: three;
  transform: rotate(180deg);
}

four {
  background: #707070;
  grid-area: four;
}

five {
  background: #707070;
  grid-area: five;
}

six {
  background: #707070;
  grid-area: six;
  transform: rotate(-90deg);
}

<one>20</one>
<two>20</two>
<three>20</three>
<four>20</four>
<five>20</five>
<six>20</six>

Answer 1

我认为您会发现旋转 div 的内容比旋转 div 本身更容易。只需使用 div 进行布局。

您可以根据需要利用 writing-mode and/or 转换。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  font-family: segoe-ui_normal, Segoe UI, Segoe, Segoe WP, Helvetica Neue, Helvetica, sans-serif;
  display: grid;
  grid-template-areas: "one two three six" "one two three six" "one four five six" "one four five six";
  grid-template-rows: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 5px;
  height: 100vh;
  padding: 5px;
}

body div {
  outline: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.one {
  grid-area: one;
  background: green;
}

.one p {
  writing-mode: vertical-rl;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.two p,
.three p {
  transform: rotate(180deg);
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  background: orange;
  grid-area: six;
  writing-mode: vertical-rl;
}

.six p {
  transform: rotate(-180deg);
}

<div class="one">
  <p>20</p>
</div>
<div class="two">
  <p>20</p>
</div>
<div class="three">
  <p>20</p>
</div>
<div class="four">
  <p>20</p>
</div>
<div class="five">
  <p>20</p>
</div>
<div class="six">
  <p>20</p>
</div>

如何将屏幕拆分为多个大小相等的盒子，所有盒子都朝外？

How to split a screen into a number of equal sized boxes all facing outwards?

html

css

css-grid