使用 CSS Grid 折叠边框

Question

我很高兴了解新的 CSS 网格规范，但我在边框方面遇到了麻烦。

是否可以折叠 CSS 网格中的边框，或者有什么方法可以设置装订线的样式吗？

正如您在下面的代码片段中看到的，块之间的 10px 边界堆栈（ 20px 总计）。

我知道这个问题不是 CSS 网格独有的，但我希望它会允许新的解决方案在所有框之间和外边缘上创建统一的 10px 边框。

我的实际用例是我制作的日历，用于练习使用网格和 React 组件。你可以在这里看到我遇到的问题：

.

由于每个月都不一样，我会考虑很多不同的边缘情况。

 .container {
  display: grid;
  grid-template-columns: 120px 120px;
  box-sizing: border-box;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  border: 10px solid palegreen;
}

.first {
  grid-column: 2 / span 1;
}

 <div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

原文由 Tim Foley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用 grid-gap 和 box-shadow：

 .container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

 <div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

或者结合行和列模板设置：

 .container {
  display: grid;
  grid-template-columns: 110px 110px;
  grid-template-rows:110px;
  box-sizing: border-box;

}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 border:solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

 <div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

请注意，当框设置为 100px 时，120px 的列和行将显示两侧边框…

如果 fr 值用于列，则不要在框上设置宽度（行将遵循相同的限制）。

 .container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 110px;
  /*whatever else */
  box-sizing: border-box;
}

.block {
  margin: 0 -10px 0 0;/* fixed width value missing */
  height: 100px;
  background-color: lightgrey;
  border: solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

 <div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
</div>

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我刚刚找到了一种简单的方法来实现这一点，使用 css outline 而不是 border 。

outline 属性在元素外部绘制一条线，因此，1px 的间隙会折叠两条线。

 .container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 1px; /* you can use gap instead of grid-gap */
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  outline: 1px solid darkgreen; /* Use outline instead of border */
}

.first {
  grid-column: 2 / span 1;
}

 <div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
</div>

正如 TylerH 评论的那样，轮廓不占用空间并且可以重叠，这就是为什么你需要为它使用间隙，如果你想要一条 5px 的线，你应该为轮廓和间隙这两个属性都写 5px。

 .container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 5px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  outline: 5px solid darkgreen; /* The same width as the gap */
}

原文由 stramin 发布，翻译遵循 CC BY-SA 4.0 许可协议