CSS 在CSS Grid中为每一行添加边框

在本文中，我们将介绍如何在CSS Grid中为每一行添加边框。CSS Grid是CSS的一种布局模块，它提供了一种简便有效的方法来创建网格布局。我们将使用CSS的伪元素和特定的属性来实现这个效果。让我们开始吧！

阅读更多：CSS 教程

了解CSS Grid

在我们深入研究如何为CSS Grid中的每一行添加边框之前，让我们先了解一下CSS Grid布局。CSS Grid是一个二维布局系统，它允许我们将页面分割成行和列，并创建复杂的布局。使用CSS Grid，我们可以轻松地定义网格容器和网格项，并控制它们在布局中的位置和大小。

下面是一个简单的CSS Grid布局的示例：

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

在这个例子中，我们创建了一个包含6个网格项的网格容器，每一行都有3列。每个网格项都有相同的样式，并以灰色背景和居中对齐的文本显示。

CSS伪元素和边框

为了在CSS Grid中的每一行添加边框，我们可以使用CSS的伪元素和边框属性。伪元素是实际上不存在于DOM中的元素，但可以用于为选定的元素添加样式。要为每一行添加边框，我们将使用:after伪元素。

首先，我们需要在CSS中为网格项设置相对定位：

.item {
  position: relative;
}

接下来，我们可以使用伪元素:after为每一个网格项的最后一个子元素创建一个可见的边框。我们可以将边框样式、宽度和颜色设置为我们想要的样式。例如，在每一行的底部添加一个2像素高的红色边框：

.item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
}

这样，每一行的最后一个网格项的底部都会有一个红色的边框。

示例：为CSS Grid中的每一行添加边框

让我们通过一个示例来演示如何为CSS Grid中的每一行添加边框。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  position: relative;
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

.item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
}

在这个示例中，我们使用相同的CSS Grid布局和样式。通过添加额外的CSS代码，我们使用伪元素:after为每一行的最后一个网格项创建了一个红色的边框。