是否可以创建跨越 CSS 网格中所有行的垂直文本？

Question

希望为网格创建一个部分标题（而不是通过将其放在部分上方来占用垂直空间），如下所示：

当然很容易让第一列使用grid-rows: 1 / span 3 跨越行，但是如果我转换文本并对齐/对齐它，div 不会占用列的全部空间，因此设置背景/边框看起来不对。

See trial pen

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  align-self: center;
  justify-self: center;
  transform: rotate(270deg);
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}

<div class="my-grid">
  <div class="section-title">Address</div>
  <div>Address 1</div>
  <input type="text">
  <div>Address 2</div>
  <input type="text">
  <div>City</div>
  <input type="text">
  <div>State</div>
  <input type="text">
  <div>Zip Code</div>
  <input type="text">
</div>

Answer 1

是的，使用writing-mode

writing-mode CSS 属性定义文本行是水平还是垂直布局以及块前进的方向。

^MDN

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  text-align: center;
  writing-mode:vertical-rl; /* vertical text */
  line-height:2rem; /* center in div */
  transform:rotate(180deg); /* spin to orient as required */
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}

<div class="my-grid">
  <div class="section-title">Address</div>
  <div>Address 1</div>
  <input type="text">
  <div>Address 2</div>
  <input type="text">
  <div>City</div>
  <input type="text">
  <div>State</div>
  <input type="text">
  <div>Zip Code</div>
  <input type="text">
</div>