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

Question

想要为网格创建一个节标题(而不是通过将其放在节上方来占据垂直空间),如下所示:

当然很容易让第一列跨越行grid-rows: 1 / span 3但是如果我转换文本并对齐/对齐它,则div不占用列的整个空间,因此设置背景/边框看起来不正确.

见试用笔

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

写入模式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>