使用CSS Grid折叠边框

Question

我很高兴能够了解新的CSS Grid规范,但我遇到了边界问题.

是否有可能在CSS网格中折叠边框,或者是否有任何方法来设置排水沟的样式？

正如您在下面的代码段中看到的那样,10px边框堆叠(20px总计)在块之间.

我知道这个问题并不是CSS网格独有的,但我希望它能够为所有方框和外边缘之间创建统一的10px边框提供新的解决方案.

我的实际用例是我正在使用Grids和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>

我很喜欢网格,但谷歌很难找到它!甚至一些关于如何改进我的问题的建议将非常感激.边界正在崩溃吗？内部网格线？

谢谢!

Answer 1

您可以使用网格间隙或框阴影:

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

请注意,当box设置为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>

Answer 2

考虑控制网格容器级别的所有大小和间距,而不是网格项级别.删除应用于项目的边框和大小.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1 */ /* 2 */
  grid-auto-rows: 100px; /* 3 */
  grid-gap: 5px; /* 4 */
  padding: 5px;
  background-color: tomato;
}

.block {
  background-color: lightgrey;
}

/* for demo only */
.block:nth-child(-n + 2) {
  visibility: hidden;
}

<div class='container'>
  <div class='block'>0</div>
  <div class='block'>0</div>
  <div class='block'>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 class='block'>8</div>
  <div class='block'>9</div>
  <div class='block'>10</div>
  <div class='block'>11</div>
  <div class='block'>12</div>
  <div class='block'>13</div>
  <div class='block'>14</div>
  <div class='block'>15</div>
  <div class='block'>16</div>
  <div class='block'>17</div>
  <div class='block'>18</div>
  <div class='block'>19</div>
  <div class='block'>20</div>
  <div class='block'>21</div>
  <div class='block'>22</div>
  <div class='block'>23</div>
  <div class='block'>24</div>
  <div class='block'>25</div>
  <div class='block'>26</div>
  <div class='block'>27</div>
  <div class='block'>28</div>
  <div class='block'>29</div>
  <div class='block'>30</div>
  <div class='block'>31</div>  
</div>

jsFiddle演示

笔记:

1. auto-fit:填写可容纳在行上的尽可能多的列.溢出列将换行.
2. minmax():每列的最小宽度为120px,最大宽度为可用空间.该fr单位与flex布局的flex-grow属性相当.
3. grid-auto-rows:自动创建的行(隐式行)的高度为100px.
4. grid-gap:5px排水沟四周.简写grid-column-gap和grid-row-gap.

Answer 3

我刚刚找到了一种简单的方法来实现这一点，使用 cssoutline而不是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 */
}