如何将屏幕划分为多个等大朝外展示的格子，适配桌面玩家计分需求？

你当前遇到的旋转后布局错乱问题，核心原因是transform: rotate()默认以元素中心为原点进行旋转，对于左右两侧这种高度远大于宽度的长条元素，旋转90度后尺寸会超出原本分配的grid单元格范围，导致位置错位。

方案1：现有grid布局最小改动（推荐） #

不需要调整grid结构，使用CSS内置的writing-mode属性替代旋转实现文字朝向调整，不会产生布局偏移，代码改动量极小：

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;
    box-sizing: border-box;
}

one, two, three, four, five, six {
  background: #707070;
  /* 统一加居中对齐，让分数显示正常 */
  display: flex;
  align-items: center;
  justify-content: center;
}

one {
  grid-area: one;
  /* 竖排文字+180度旋转，实现朝向左侧玩家 */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

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

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

four {
  grid-area: four;
}

five {
  grid-area: five;
}

six {
  grid-area: six;
  /* 竖排文字，实现朝向右侧玩家 */
  writing-mode: vertical-rl;
}

对应HTML不需要修改，和你原有代码一致。

方案2：适配任意玩家数量的通用方案 #

如果后续需要支持3/4/5/7/8等不同数量的玩家，可以改用圆形布局，通过CSS变量动态计算每个区块的位置和角度，不需要手动写grid模板：

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  --player-count: 6; /* 动态修改这个值即可适配不同玩家数量 */
}

.player-score {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  background: #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  --angle: calc(360deg / var(--player-count) * var(--player-index));
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(0, -40vh) rotate(calc(-1 * var(--angle)));
}

对应HTML结构可以简化为：

<div class="container">
  <div class="player-score" style="--player-index:0">20</div>
  <div class="player-score" style="--player-index:1">20</div>
  <div class="player-score" style="--player-index:2">20</div>
  <div class="player-score" style="--player-index:3">20</div>
  <div class="player-score" style="--player-index:4">20</div>
  <div class="player-score" style="--player-index:5">20</div>
</div>

内容的提问来源于stack exchange，提问作者Alexander Craggs