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

Question

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

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

如果我很高兴 left-hand 列在 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;
}

Link to JSFiddle

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

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>

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

CSS Grid styling question using span - changes when using align-self

css

css-grid

vertical-alignment