使用 CSS Grid 折叠边框答案

【问题标题】：Collapsing borders using CSS Grid使用 CSS Grid 折叠边框
【发布时间】：2017-09-26 22:56:08
【问题描述】：

我对新的 CSS 网格规范很感兴趣，但我遇到了边框问题。

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

正如您在下面的 sn-p 中看到的，10px 边界堆栈（20px 总计）位于块之间。

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

我的实际用例是一个日历，用于练习使用 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>

【问题讨论】：

仅供参考，这是某人构建的 CSS Grid 日历：stackoverflow.com/q/43311943/3597276
此外，该问题的常见解决方案是在上个月和下个月的日子里用褪色的单元格填充空单元格。
谢谢@Michael_B ！我的计划是制作一个超级可定制的日历前端，这样我就可以打印出我喜欢的月历。不过，就目前而言，主要是关于学习练习。期待审查该问题及其答案；看起来会很有帮助。
值得注意的是，这些现代的网格绘制方法仍然存在与此一样基本的缺点。将此与 HTML 诞生之初的表格布局进行比较，可以使用 border-collapse: collapse。

标签： html css css-grid

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

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

【讨论】：

太棒了！我肯定会尝试这两种方法。
如果我使用frs 定义了我的网格模板，您认为这些方法仍然有效吗？
@TimFoley 如果你这样做了，不要在孩子身上设置宽度，只有模板中的列号 edit 添加了一个 sn-p 示例
@TimFoley 一个示例，其中 2 个网格并排，1fr 用于行和列：codepen.io/gc-nomade/pen/QvpBaO
刚刚测试过了，我想你已经解决了！非常感谢

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

注意事项：

auto-fit: 填写尽可能多的列。溢出列将换行。
minmax()：每列的最小宽度为 120 像素，最大宽度为可用空间的最大宽度。 fr 单元相当于 flex 布局的 flex-grow 属性。
grid-auto-rows：自动创建的行（隐式行）高度为 100px。
grid-gap: 周围有 5px 的排水沟。 grid-column-gap 和 grid-row-gap 的简写。

【讨论】：

不错！我希望对未填充空间的情况有更多的控制。对于其他应用程序，我一定会牢记这一点。
我指的是左上角和右下角的绿色背景色。

【解决方案3】：

如果您认为间隙边框颜色与不属于当月的日期单元格相同，您可以采取的另一种方法是将div 包裹在整个网格容器周围并设置其@987654322 @ 到您希望边框的颜色，并给它 1px 的 padding 和 1px 的 grid-gap。使用这种方法，您可以实现边界统一的网格，而无需使用 box-shadow 的复杂性，这对我来说就像是 hack。

【讨论】：

这和@Michael_B的回答不一样吗？除了他使用 5px 而不是 1px 边框。

【解决方案4】：

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

【讨论】：

虽然轮廓在元素外部画了一条线，但需要注意的是它不占用空间，因此不会导致布局发生变化。这也允许一个奇怪的“功能”，您可以将两个元素并排放置，并且它们的轮廓可以看起来“重叠”。
我发现这个答案是最简单和最通用的解决方案。谢谢。
我认为这是适合我的解决方案，直到我了解到没有 outline-top、outline-left 等 :(

【解决方案5】：

我一直在寻找一种纯 CSS 方法来折叠网格的边框，但由于找不到，所以我做了一个小原型。

HTML

<div class="container">
  <div id="grid" class="grid">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
    <div class="element">11</div>
  </div>
</div>

CSS

.container {
  max-width: 720px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
}

.element {
  text-align: center;
  padding: 20px;
  background: #f4f4f4;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.border-top {
  border-top: 1px solid black;
}

.border-left {
  border-left: 1px solid black;
}

.border-top-left-rounded {
  border-top-left-radius: 8px;
}

.border-top-right-rounded {
  border-top-right-radius: 8px;
}

.border-bottom-left-rounded {
  border-bottom-left-radius: 8px;
}

.border-bottom-right-rounded {
  border-bottom-right-radius: 8px;
}

JS

function dynamicRoundedCorners() {
  // get
  const grid = document.getElementById("grid");
  const elements = grid.children;
  const gridStyle = getComputedStyle(grid);

  // reset
  for (element of elements) {
    element.classList = "";
    element.classList.add("element");
  }

  // analyze
  const elementsPerRowCount = gridStyle.gridTemplateColumns
    .split(" ")
    .filter((element) => Number(element.replace("px", ""))).length;
  const rowCount = Math.ceil(elements.length / elementsPerRowCount);
  const rowsFirstAndLastElements = [];
  let firstAndLastElementIndex = 0;

  for (let i = 1; i <= rowCount; i++) {
    const rowFirstAndLastElements = [firstAndLastElementIndex];

    if (i === rowCount && rowCount > 1) {
      rowFirstAndLastElements.push(
        firstAndLastElementIndex + (elements.length % elementsPerRowCount) - 1
      );
    } else {
      rowFirstAndLastElements.push(
        firstAndLastElementIndex + elementsPerRowCount - 1
      );
    }
    rowsFirstAndLastElements.push(rowFirstAndLastElements);
    firstAndLastElementIndex += elementsPerRowCount;
  }

  // apply
  // -> add border-top on the first row
  for (let i = 0; i <= rowsFirstAndLastElements[0][1]; i++) {
    elements[i].classList.add("border-top");
  }

  // -> add border-left on every first element of a row
  for (let i = 0; i < rowCount; i++) {
    elements[rowsFirstAndLastElements[i][0]].classList.add("border-left");
  }

  // -> add top-left rounded corner on first element of first row
  elements[0].classList.add("border-top-left-rounded");
  // -> add top-right rounder corner on last element of first row
  elements[rowsFirstAndLastElements[0][1]].classList.add(
    "border-top-right-rounded"
  );
  // -> add bottom-left rounded corner on first element of last row
  elements[rowsFirstAndLastElements[rowCount - 1][0]].classList.add(
    "border-bottom-left-rounded"
  );
  // -> add bottom-right rounder corner on last element of last row
  elements[elements.length - 1].classList.add("border-bottom-right-rounded");
  // -> if elements.length % elementsPerRowCount != 0, add bottom-right rounder corner on last element of second to last row
  if (elements.length % elementsPerRowCount !== 0) {
    elements[
      rowsFirstAndLastElements[rowsFirstAndLastElements.length - 2][1]
    ].classList.add("border-bottom-right-rounded");
  }
}

// call
dynamicRoundedCorners();
window.addEventListener("resize", dynamicRoundedCorners);

这里是链接：https://codepen.io/RilDev/pen/gOmjNrQ

【讨论】：