CSS Grid 中如何设置单元格的背景和边框

CSS Grid 是一种让开发者可以通过简单的 HTML 和 CSS 代码来构建网格布局的技术。在网格布局中，一般会将页面分为若干列和行，然后将内容填充到这些单元格中。在这篇文章中，我们将会讨论如何在 CSS Grid 中设置单元格的背景和边框。

背景颜色

设置单元格的背景颜色可以通过 CSS 的 background-color 属性来实现。下面是一个示例代码：

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
</div>

// javascriptcn.com 代码示例
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.cell {
  background-color: #f2f2f2;
}

在上面的代码中，我们首先定义了一个包含 4 个单元格的网格布局，每行和每列都分别有两个单元格。然后，我们设置了单元格的背景颜色为灰色。

边框

设置单元格的边框可以通过 CSS 的 border 属性来实现。下面是一个示例代码：

.cell {
  border: 1px solid #ccc;
}

在上面的代码中，我们设置了单元格的边框为 1 像素宽的实线，颜色为灰色。

边框和背景颜色的组合

我们也可以将边框和背景颜色结合起来，来达到更好的效果。下面是一个示例代码：

.cell {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

在上面的代码中，我们将单元格的背景颜色和边框都设置了，可以看到单元格的外观更加完整。

总结

在 CSS Grid 中，我们可以通过 background-color 和 border 属性来设置单元格的背景颜色和边框。我们也可以将这两个属性结合起来，来达到更好的效果。希望这篇文章能够帮助你更好地理解 CSS Grid，并在实际开发中得到应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657cf6d0d2f5e1655d7c0313