CSS Grid：如何将跨行列的基线与其他列最后一行对齐

方案一：使用last baseline对齐跨多行网格项 #

默认情况下，跨多行的网格项会以第一行的基线作为对齐基准，因此初始代码中元素a会和元素b对齐。通过给元素a设置align-self: last baseline，可以让它以所在网格容器的最后一行基线（即元素c所在行的基线）作为对齐基准，直接实现需求。

修改后的代码如下：

CSS

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1 / span 2;
  grid-column: 1;
  padding: 8px;
  background: red;
  align-self: last baseline; /* 关键属性 */
}
#b{
  grid-row: 1;
  grid-column: 2;
  background: yellow;
}
#c{
  grid-row: 2;
  grid-column: 2;
  background: blue;
}

HTML

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>

方案二：嵌套网格容器对齐基线 #

如果你倾向于将元素b和c包裹在容器内，只需将包裹容器#d设置为grid布局（而非inline-block）。此时，作为外部网格项的#d，其基线会对应内部网格最后一行的基线（即元素c的基线），外部网格的align-items: baseline会自动让元素a与#d的基线对齐，间接实现a与c的基线对齐。

修改后的代码如下：

CSS

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1;
  grid-column: 1;
  padding:8px;
  background:red;
}
#d{
  display: grid; /* 使用grid布局替代inline-block */
  grid-row: 1;
  grid-column: 2;
}
#b{
  background:yellow;
}
#c{
  background:blue;
}

HTML

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div id="b">bbbbb</div>
    <div id="c">ccccc</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Ricky Mo