如何使用 grid-template-areas 在整行上创建边框答案

【问题标题】：How to create a border across an entire row using grid-template-areas如何使用 grid-template-areas 在整行上创建边框
【发布时间】：2020-07-20 17:09:03
【问题描述】：

我正在使用 grid-template-areas 为我的网站创建网格效果，但我试图在整个列中设置边框，但它不能以两种不同的方式工作：

每个单元格只有一个边框，因此它会被截断，而不是单行。

它只去边框的文本或内容的长度。

以下是我的意思的示例：https://codepen.io/aysong/pen/dyGwRaG

我尝试了以下方法，但我认为它没有任何作用。

  grid-row-gap:2px;

在上图中，斜体文本有一个底部边框，但它只为文本添加下划线。您可以通过 Active Time 和 Yield 顶部边框再次看到它。

我基本上只是在寻找扩展行的整个单个顶部或底部边框。

【问题讨论】：

或者查看 grid-template-rows
如果您使用背景颜色，网格行间隙是个好主意

标签： css

【解决方案1】：

分而治之！

<!DOCTYPE html>
<html>
<head>

<style>
.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.part1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
    border-top: solid 1px red;
}
.part2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
}
.part3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: solid 1px red;
}
</style>
</head>
<body>

    <div class="grid-container">
        <div class="part1">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
        </div>  
        <div class="part2">
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
        </div>
        <div class="part3">
            <div class="item7">7</div>
            <div class="item8">8</div>
            <div class="item9">9</div>
        </div>
      </div>

</body>
</html>

【讨论】：

【解决方案2】：

最简单的方法是把你的网格容器自己分成几行：

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
<div class="grid-container">
  <div class="item1">4</div>
  <div class="item2">5</div>
  <div class="item3">6</div>
</div>
<div class="grid-container">
  <div class="item1">7</div>
  <div class="item2">8</div>
  <div class="item3">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    'item1 item2 item3'
  grid-gap: 10px;
  padding: 10px;
  border-bottom: 1px solid red;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

【讨论】：

【解决方案3】：

请不要给grid-gap，因为它会在单元格之间造成不必要的分隔。看看下面的代码，希望这就是你要找的。p>

.grid-container {
  display: grid;
  grid-template-areas:
    'item1 item2 item3'
    'item4 item5 item6'
    'item7 item8 item9';
  grid-gap: 0px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item{
  border-top: 1px solid red;
}

<div class="grid-container">
  <div class="item1 item">1</div>
  <div class="item2 item">2</div>
  <div class="item3 item">3</div>  
  <div class="item4 item">4</div>
  <div class="item5 item">5</div>
  <div class="item6 item">6</div>
  <div class="item7 item">7</div>
  <div class="item8 item">8</div>
  <div class="item9 item">9</div>
</div>

【讨论】：