如何用Grid实现与Flex示例一致的字段旁仅边框+内边距的垂直红条

我想用Grid布局在包含字段和验证信息的DIV旁显示垂直红条，实现和Flex示例完全一样的效果——红条通过DIV的左边框加内边距来实现。

用Flex布局很简单：两个DIV堆叠后会自动适配默认尺寸，内边距正常生效，高度取两个DIV的最大值。但我用grid-template-areas: "a b";定义的Grid示例里，默认间距不生效，我不想手动定义宽度和尺寸，只靠红条的15px内边距就够了。

解决方案 #

问题核心是空的.gridCol1在Grid布局中默认宽度会收缩到0，导致边框和内边距无法正常展现。只需要调整Grid的列尺寸规则，让第一列适配内容尺寸，第二列占满剩余空间即可：

修改后的代码 #

CSS

.error {
  color: red;
}

.flexExample {
   display: flex;
}

.flexVerticalBar {
   border-left: 3px solid red;
   padding-left: 15px;
}

.gridExample {
  display: grid;
  /* 第一列适配内容尺寸，第二列占满剩余空间 */
  grid-template-columns: min-content auto;
}

.gridCol1 {
   border-left: 3px solid red;
   padding-left: 15px;
}

.gridCol2 {
  /* 无需额外指定grid-area，元素按顺序填充列即可 */
}

HTML

<div class="flexExample">
   <div class="flexVerticalBar"></div>
   <div>
      <span class="error">Name is required</span><br/>
            <label for="textName">Name:</label><br/>
            <input type="text" id="textName" />
   </div>
</div>

<hr/>

<div class="gridExample">
   <div class="gridCol1"></div>
   <div class="gridCol2">
      <span class="error">Name is required</span><br/>
            <label for="textName">Name:</label><br/>
            <input type="text" id="textName" />   
   </div>
</div>

说明 #

• grid-template-columns: min-content auto; 是关键：min-content让第一列仅占据内容所需宽度（即3px边框+15px内边距的总宽度），auto让第二列自动填充剩余空间
• 无需再使用grid-template-areas和grid-area属性，简化布局结构，元素按默认顺序填充Grid列
• 修改后Grid布局的效果和Flex示例完全一致，无需手动定义任何固定宽度

内容的提问来源于stack exchange，提问作者gene b.