如何使网格线可见？

Question

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

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

这种解决方案的问题是，如果我的网格区域为空，则不会有线。但是我需要所有网格区域周围的线。如果我将项目添加到空的网格区域并设置它们，则只有一个边框会很好，但是如果未知的空元素（和非空元素）的数量怎么办？如果元素比一个单元格长，该怎么办？我想要每个单元格周围都有边框。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.longer {
  grid-column: auto / span 2;
}

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

好的，我可以将较长的项目制作为网格，并将其模板列设置为span的值，并填充单元格，但这并不是一个很好的解决方案。

所以，请让我知道最好的解决方案。

Answer 1

一个想法是使用多个背景添加这些行linear-gradient：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

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

怎么运行的？

这个想法是创建带有渐变的线条，每条线条都具有以下格式：

linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) X Y/width height

正如你所看到的，我在渐变中使用了相同的颜色，因为我们的想法是有一条实线，然后我们只需要指定尺寸和位置。对于尺寸，我们有两种情况：它要么是一条垂直线，所以我们将[2px 100%]在尺寸部分中拥有，要么是一条水平线，我们将拥有[100% 2px] （边缘的线只有 1px）。

顺便说一句，如果你仔细观察我没有使用的代码100%，但我是calc(100% - 20px)因为填充而制作它的，所以我们应该根据行的大小删除它。

现在我们需要调整行的位置，这里我们还需要考虑填充和行/列的数量。让我们考虑一下有 3 列和 3 行的情况：

让我们考虑第一行的位置。正如你所看到的，它Y非常简单，它是填充（10px），但它X更棘手，但如果你仔细观察，我们会发现它并不是很困难，它的公式如下：

10px + (100% - 20px)/3 

因此我们得到了10pxpadding 加上没有 padding 的内部宽度除以 3。我们对其他行应用相同的逻辑。

这是仅使用渐变构建的网格的示例：

linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) X Y/width height

10px + (100% - 20px)/3 

这是使用 CSS 变量的另一种简化语法，您可以在其中更好地查看所使用的模式和不同值：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
  /* vertical lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
  /* horizontal lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px  /calc(100% - 20px)  1px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc((100% - 20px) / 3 + 10px)  / calc(100% - 20px) 2px,
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(2*((100% - 20px) / 3) + 10px) / calc(100% - 20px) 2px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  opacity:0;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

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