使用CSS网格折叠边框 [英] Collapsing borders using CSS Grid

问题描述

我很高兴了解新的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> 

我爱Grid，但是对Google来说却很难！即使是关于如何改善我的问题的一些建议，也将不胜感激.边界崩溃是正确的期限吗?内部网格线?

谢谢！

解决方案

您可以使用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> 

请注意，当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> 

I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders.

Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter?

As you can see in the snippet below, the 10px borders stack (20px total) in-between blocks.

I understand this issue isn't unique to CSS Grids, but I'm hoping it'll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges.

My actual use-case is a calendar I'm making to practice working with Grids and React components. You can see the issue I'm running into here:

.

Since every month is different, I'll have a lot of different edge-cases to consider.

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

I'm loving the Grid, but finding it very hard to Google! Even some suggestions on how to improve my question would be much appreciated. Is border collapsing the right term? Internal gridlines?

Thanks!

解决方案

You may use grid-gap or 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>

or combine row and columns template setting :

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

note that columns and rows of 120px will show both sides borders when box is set to 100px ....

if fr value is used for columns, then do not set width on boxes (rows would follow same restriction)

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

这篇关于使用CSS网格折叠边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！