如何使网格线可见？

时间：2018-05-29 15:19:39

标签： html css css3 css-grid 

.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值，并填充单元格，但这不是一个优雅的解决方案。

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

2 个答案:

答案 0 :(得分：2)

一个想法是使用带有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行的情况：

enter image description here

让我们考虑第一行的位置。你可以看到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>

答案 1 :(得分：2)

可以在网格项上设置伪元素。

这个伪大于网格，设置没有项目的边框。

这样可以在整个网格中进行多次调整，但最后你可以获得或多或少的请求

after伪制作垂直线。它设置为300％的高度，使其不仅覆盖当前元素，还延伸到它之外。这是一个适用于大多数网格的任意值。

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

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

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

相关问题
最新问题