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

Question

希望为网格创建一个部分 header（而不是通过在部分上方占据垂直 space），如下所示：

当然很容易让第一列用 grid-rows: 1 / span 3 跨越行，但是如果我转换文本并 align/justify 它， div 不会占用列已满 space，因此设置 backgrounds/borders 看起来不正确。

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

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

^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>

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

Is it possible to create vertical text that spans all rows in a CSS Grid?

css

css-grid