css - 使用 span 的 CSS Grid 样式问题 - 使用 align-self 时发生变化

Question

我有一个网格，其中有两列和三行，但第一列跨越所有 3 行。第一列包含文本，第二列包含 3 行文本，每行一个。

我希望第 1 列的高度根据网格内容项的背景颜色与第 2 列的高度匹配。

如果我很高兴将左列对齐在 3 行的顶部，这很好用。但是当我尝试使用 align-self 使其垂直对齐时，背景颜色会缩小以仅覆盖单行。

也许 JSFiddle 会比我的描述说得更清楚。

HTML：

<div class="wrapper">

  <div class="box title1">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

  <div class="wide">&nbsp;</div>

  <div class="box title2">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

</div>

CSS：

body {
  margin: 20px;
  font-family: "Garamond", "Times New Roman", serif;
}

.box {
  background-color: lightgrey;
  padding: 5px;
}

.wrapper {
  display: grid;
  grid-template-columns: 8em 8em;
}

.wide {
  grid-column: span 2;
}

.title1 {
  grid-row: span 3;
  font-size: 150%;
  font-weight: bold;
}

.title2 {
  grid-row: span 3;
  align-self: center;
  font-size: 150%;
  font-weight: bold;
}

链接到 JSFiddle

如何让标签垂直对齐但背景颜色高度匹配？我尝试添加诸如“height:100%;”之类的属性 到第二个标题，但一切都以略有不同的方式中断。我正在使用 Firefox，但我当然希望尽可能合理地使用跨浏览器解决方案。

标签： csscss-gridvertical-alignment

Answer 1

制作元素display:flex，然后align-items:center

body {
  margin: 20px;
  font-family: "Garamond", "Times New Roman", serif;
}

.box {
  background-color: lightgrey;
  padding: 5px;
}

.wrapper {
  display: grid;
  grid-template-columns: 8em 8em;
}

.wide {
  grid-column: span 2;
}

.title1 {
  grid-row: span 3;
  font-size: 150%;
  font-weight: bold;
}

.title2 {
  grid-row: span 3;
  display: flex;
  align-items: center;
  font-size: 150%;
  font-weight: bold;
}

<div class="wrapper">

  <div class="box title1">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

  <div class="wide">&nbsp;</div>

  <div class="box title2">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

</div>