使用Grid在带有字段和验证消息的DIV旁边显示一个垂直的红色条，并获得与第一个Flex示例相同的结果，最简单的方法是什么？该条被实现为带有填充的DIV左边框。
使用Flex很简单：我只是堆叠2 DIV的，他们假设默认大小：接着是填充，并且高度是最大DIV的值。在Grid示例中，我定义了grid-template-areas: "a b";，但默认间距不起作用。我不想定义宽度和大小，15px的填充应该足够了。

.error {
  color: red;
}

.flexExample {
   display: flex;
}

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

.gridExample {
  display: grid;
  grid-template-areas: "a b"
}

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

.gridCol2 {
   grid-area: b;
}

<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>