html - 如何使网格线可见？

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>

好吧，我可以将较长的元素制作成网格，并将其模板列设置为其跨度值，并填充单元格，但这不是一个优雅的解决方案。

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

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 

所以我们有填充的 10px 加上没有填充的内部宽度除以 3。我们对其他行应用相同的逻辑。

这是一个仅使用渐变构建的网格示例:

.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>

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

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  --c:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8));
  --p:10px;
  --w:calc(100% - 2*var(--p));
  background:
  /* vertical lines*/
   var(--c) var(--p) var(--p) / 1px var(--w),
   var(--c) calc(1*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(2*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(3*(var(--w) / 3) + var(--p)) var(--p) / 1px var(--w),
  /* horizontal lines*/
   var(--c) var(--p) var(--p) / var(--w)  1px,
   var(--c) var(--p) calc(1*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(2*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(3*(var(--w) / 3) + var(--p)) / var(--w) 1px;
  padding:calc(--p);
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  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>