如何在网格显示的每行顶部应用边框？

Question

如何在网格显示的每一行顶部应用边框？ 这样的东西，但是放在一个容器中。我尝试在Google中搜索此问题，但未找到类似的内容。

<img src={image} />

.container {
  max-width: 700px;
}
.tab {
  border-top: 1px solid #000;
  margin-bottom: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        
}

.tab2 {
  border-top: 1px solid #000;
  padding-top: 10px;
  display: grid;
         
}

.item {
  width: 150px;
  height: 70px;
  background-color: green;
}

Answer 1

要获得预期的结果，请在tab2上使用width：fit-content

.container {
  max-width: 700px;
}
.tab {
  border-top: 1px solid #000;
  margin-bottom: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
        
}

.tab2 {
  border-top: 1px solid #000;
  padding-top: 10px;
  display: grid;
  width: fit-content;          
}

.item {
  width: 150px;
  height: 70px;
  background-color: green;
}

<div class="container">
  <div class="tab">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="tab2">
    <div class="item">4</div>
  </div>
    </div>

codepen-https://codepen.io/nagasai/pen/zmpMdR