具有固定跨度的框以填充整个列答案

【问题标题】：Boxes with fixed span to fill entire column具有固定跨度的框以填充整个列
【发布时间】：2018-05-12 05:21:31
【问题描述】：

我是第一次使用 CSS-Grid 用户：

我试图实现的是使用 3 列网格的灵活盒子系统，我可以简单地添加 1、2 或 3 列大小的盒子；只使用一个类。

我试图通过这样做https://codepen.io/mathil/pen/WXarXB 来实现这一点：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background: grey;
}

.card-fullspan {
  grid-column: span 3;
}

.card-twothirdspan {
  grid-column: span 2;
}

.card-thirdspan {
  grid-column: span 1;
}

<div class="container">
  <div class="card-fullspan" style="background: red">Fullspan</div>
  <div class="card-twothirdspan" style="background:green">
    twothirdspan
  </div>
  <div class="card-thirdspan" style="background:green">
    thirdspan
  </div>
</div>

我知道我必须将它跨度为 4，这将是整个跨度：

.card-fullspan {
  grid-column: span 4;
}

但这当然不适用于其他两个，因为我无法通过其他框的组合得出 for 的总和。右侧总会有12px Gutter。

我知道可以为每个项目添加不同的类或 ID，但这不是理想的解决方案。

【问题讨论】：

标签： css grid-layout css-grid

【解决方案1】：

span 关键字计数后续条网格线。

因此，在三列网格中，当您希望项目跨越整行时，您指定 span: 3，而不是 span: 4，这会创建一个额外的（隐式）列。

您的代码：

.card-fullspan {
   grid-column: span 4;  /* spans across 4 columns */
}

试试这个：

.card-fullspan {
   grid-column: span 3; /* spans across 3 columns */
}

或者这个：

.card-fullspan {
   grid-column: 1 / 4; /* spans from grid-column-line 1 to 4 (3 columns) */
}

或者这个：

.card-fullspan {
   grid-column: 1 / -1; /* spans from grid-column-line 1 from the start side
                           to grid-column-line: 1 starting from the end side
                           (note: negative integers work only with explicit grids  */
}

所有细节都在本节的规范中：

https://www.w3.org/TR/css3-grid-layout/#line-placement

revised codepen

【讨论】：