html - 矩阵外的 CSS 网格文本

Question

所以我用网格创建了这个矩阵，我在设置网格周围的外部元素时遇到了问题。在左侧（Y 轴），我需要像现在一样将文本旋转 -90 度，但与网格一致，并且在网格和网格之间我需要从左下角到顶部的数字 1-5左代表正方形。在底部，我需要同样的东西，内嵌文本和中间文本，以及这些正方形从左到右的网格编号 1-5。每次我尝试添加一些东西时，它都会将网格向下或推到一边。

body {
  justify-content: center;
}

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
  
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}
#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  height: 100vh;
  display: grid;
  place-items: center;
}
p.likelihood {
   width: 25px;
   transform: rotate(-90deg);
   font-size: 30px;
   position: absolute;
   margin-top: 300px;
}
p.consequence {
   width: 25px;
   font-size: 30px;
   position: absolute;
}
p.11{
  position: absolute;
}

<p class="likelihood">
Likelihood
</p>
<p class="11">
1
</p>
<section>
<div class="wrapper">
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: 
#329932;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
  </div>
  <div class="box box1" style="background-color: #ff3232;">
    
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
  <div class="box box1" style="background-color: #ffff32;">
    
  </div>
</div>
<p class="consequence">
Consequence
</p>
</section>

标签： htmlcss

Answer 1

我不确定这是否是您想要的，但是使用绝对定位顶部和左侧值并将您的标题 p 标签放在相对定位的部分（以及添加一些填充值），我相信我实现了什么您正在寻找？

更新：我也添加了数字，但是tbh，这整件事是“hackily”与任意值组合在一起......肯定有一种“更好”的方法来做到这一点，但这可能会达到你想要的。

.box {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}

.wrapper {
  margin: 60px 0 90px 90px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  position: relative;
  width: 600px;
}
p.likelihood {
   transform: rotate(-90deg) translateY(-50%);
   transform-origin: top;
   position: absolute;
   top: 50%;
   left: -20px;
   font-size: 30px;
   margin: 0;
}

p.consequence {
   font-size: 30px;
   position: absolute;
   transform: translateX(-50%);
   left: calc(50% + 45px);
   bottom: -60px;
   margin: 0;
}

.numbers-container {
  position: absolute;
  display: flex;
}

.numbers-container-x {
  padding-top: 10px;
  left: 90px;
  bottom: -25px; 
}

.numbers-container-x .number {
  width: 100px;
  text-align: center;
}

.numbers-container-y {
  flex-direction: column-reverse;
  left: 70px;
  top: 0;
}

.numbers-container-y .number {
  height: 100px;
  line-height: 100px;
}

<section>
  <div class="wrapper">
    <div class="box box1" style="background-color: 
  #329932;">
    </div>
    <div class="box box1" style="background-color: 
  #329932;">
    </div>
    <div class="box box1" style="background-color: 
  #329932;">
    </div>
    <div class="box box1" style="background-color: 
  #329932;">
    </div>
    <div class="box box1" style="background-color: 
  #329932;">
    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: 
  #329932;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">

    </div>
    <div class="box box1" style="background-color: #ff3232;">


    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
    <div class="box box1" style="background-color: #ffff32;">

    </div>
  </div>
  
  <div class="numbers-container numbers-container-y">
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">4</div>
    <div class="number">5</div>
  </div>
  
  <div class="numbers-container numbers-container-x">
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">4</div>
    <div class="number">5</div>
  </div>
  
  <p class="likelihood">
    Likelihood
  </p>
  <p class="consequence">
    Consequence
  </p>
</section>