为何网格布局中的右括号元素无法与行底部对齐？

当前实现效果中，最后的右括号)未与底部对齐，尝试过用额外<div>包裹、设置vertical-align等方法都无法让其下移。需求是让.underline元素占据尽可能多的横向空间，其余元素围绕它布局，不局限于Grid布局。

原代码示例 #

CSS

.gridContainer {
  display: grid;
}

.gridItemContainer {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
}

.alignMiddle {
  vertical-align: middle;
}

.left {
  text-align: left;
}

.fl::first-letter {
  font-size: 2rem;
}

.square:before {
  content: '\25A0';
  font-size: 1.5em;
}

.underline {
  border-bottom: .3rem solid #000000;
  margin: .4rem .3rem;
}

HTML

<div class="gridContainer">
  <div style="grid-row:1; grid-column:1;">
    <div class="gridItemContainer">
      <div class="alignMiddle left" style="display:grid;grid-template-columns:max-content auto min-content;">
        <div style="grid-column:1;grid-row:1;" class="fl">Craft <span class="square"></span>(</div>
        <div class="underline" style="grid-column:2;grid-row:1;margin:0;"></div>
        <div style="grid-column:3;grid-row:1;">)</div>
      </div>
    </div>
  </div>
</div>

可行解决方案 #

方法1：Flex布局（简洁高效）

利用Flex实现底部对齐，同时让下划线占满剩余空间：

/* 替换内层Grid为Flex容器 */
.flex-container {
  display: flex;
  align-items: flex-end; /* 所有元素底部对齐 */
  gap: 0.3rem; /* 替代原margin的间距 */
}

.underline {
  border-bottom: .3rem solid #000;
  flex: 1; /* 占满剩余横向空间 */
  margin-bottom: 0.4rem; /* 保持原垂直间距 */
}

/* 保留原有样式 */
.fl::first-letter {
  font-size: 2rem;
}

.square:before {
  content: '\25A0';
  font-size: 1.5em;
}

对应HTML调整：

<div class="gridContainer">
  <div style="grid-row:1; grid-column:1;">
    <div class="gridItemContainer">
      <div class="alignMiddle left flex-container">
        <div class="fl">Craft <span class="square"></span>(</div>
        <div class="underline"></div>
        <div>)</div>
      </div>
    </div>
  </div>
</div>

方法2：修改原Grid布局

如果坚持使用Grid，只需给内层Grid容器添加底部对齐属性：

/* 修改内层Grid样式 */
.grid-inner {
  display: grid;
  grid-template-columns: max-content auto min-content;
  align-items: end; /* 关键：网格项底部对齐 */
  gap: 0.3rem;
}

.underline {
  border-bottom: .3rem solid #000;
  margin-bottom: 0.4rem;
}

/* 保留原有样式 */

对应HTML调整：

<div class="gridContainer">
  <div style="grid-row:1; grid-column:1;">
    <div class="gridItemContainer">
      <div class="alignMiddle left grid-inner">
        <div class="fl">Craft <span class="square"></span>(</div>
        <div class="underline"></div>
        <div>)</div>
      </div>
    </div>
  </div>
</div>

原理说明 #

原问题根源是Grid/Flex容器默认对齐方式为stretch，导致下划线元素被拉伸，而括号作为内联内容的对齐基准与下划线的边框底部不匹配。设置align-items: end（Grid）或align-items: flex-end（Flex）后，所有子元素都会对齐到容器底部，括号自然与下划线的底部边框对齐；同时通过flex:1（Flex）或auto列宽（Grid）让下划线占据剩余空间，满足布局需求。

内容的提问来源于stack exchange，提问作者D.G. Redd