如何使网格线可见？答案

【问题标题】：How to make grid lines visible?如何使网格线可见？
【发布时间】：2018-05-29 15:19:38
【问题描述】：

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

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

所以请告诉我最好的解决方案。

【问题讨论】：

你不能。网格轨道不是元素，因此无法设置样式。也许你需要重新考虑你的布局方法。
您可能会发现此信息很有用：CSS Grid Inspector: Examine grid layouts

标签： html css css-grid

【解决方案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>

【讨论】：

很好地使用了 CSS 技术。希望它适用于 OP。
太棒了！你能告诉我，哪些值控制行数、列数、长度和高度？如果列的宽度不同，如何控制行的位置？
@DorLask 好的，我将详细说明答案以使其更通用，您可以更好地理解如何进行计算；）
@DorLask 您实际上只需要绘制第一行和最后一行行（最多 2 个空网格单元并绘制最后 2 列行（第一列将始终保持至少 1单元格为一行）。
@G-Cyr 是的，我想过，但我更喜欢渐变解决方案：p

【解决方案2】：

也许你可以在网格项目上设置伪元素。

这个pseudos比网格大，用来在没有item的地方设置边框。

这需要对整个网格进行多次调整，但最终您可以或多或少地得到您的要求

after 伪生成垂直线。将其设置为 300% 高度以使其不仅覆盖当前元素，而且还超出当前元素。这是一个任意值，适用于大多数网格。

之前的伪创建水平线，宽度遵循相同的标准

我添加了一个悬停效果，只保留第一个元素的后面，并降低高度以仅覆盖父元素

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  overflow: hidden;
  box-shadow: 0px 0px 0px 10px #2196F3;
  margin: 10px;
  border: solid 2px red;
}
.grid-item {
  background-color: lightblue;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  position: relative;
}

.longer {
  grid-column: auto / span 2;
}

.grid-item:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  right: -2px;
  top: 0px;
  background-color: red;
  z-index: 1;
}

.grid-container:hover .grid-item:nth-child(n + 2):after {
   background-color: transparent;
}

.grid-container:hover .grid-item:nth-child(1):after {
   background-color: green;
   height: 100%;
  transition: height 3s linear;
}

.grid-item:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 2px;
  left: -2px;
  bottom: -2px;
  background-color: red;
  z-index: 1;
}

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

【讨论】：

我需要网格中的每一行，包括第 7 项。
我现在在移动设备上可以在伪设备上设置 zindex 吗？
我在pseudos上添加了一个zindex，让它们保持在前面
我喜欢这个解决方案也适用于自动内容codepen.io/danield770/pen/wXvqRz +1
宽度和高度控件的百分比值是多少？