使网格列跨越整行

Question

假设我们有 2 CSS 个网格容器，动态 列计数基于宽度。

display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

网格工作得很好，但是如果我们需要另一个网格使第一列与上面显示的代码的另一个网格中的第一列相同，但它是另一个跨越更多单元格的列怎么办 - 取决于如何许多单元格在当前行中。

为了更好地理解问题，有图片：

在更窄的包装纸上：

我们需要应用 grid-column: span ALL （如果存在类似的东西），意思是 ALL = 直到当前行的末尾。

真正重要的是 "First" 列应始终与“1”列对齐。

运行示例的代码在这里：

.grid div {
  /* Not important fancy styles */
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid {
  width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  background-color: red;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}

<div class="grid">
  <div class="grid-first">
    First
  </div>
  <div class="grid-second">
    Second (Want till end)
  </div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">
    1
  </div>
  <div class="grid-another">
    2
  </div>
  <div class="grid-another">
    3
  </div>
  <div class="grid-another">
    4
  </div>
</div>

PS。请不要 post 使用媒体查询的解决方案。我对任何（即使是小的 hacky 解决方案）感兴趣，它可以在不使用媒体查询的情况下工作。

Answer 1

CSS 网格规范中有两个有趣的部分：

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side, while negative indexes count from the end side.

也在这里...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

换句话说，在处理 显式网格时 ，这意味着由这些属性定义的网格：

grid-template-rows
grid-template-columns
grid-template-areas
grid（也就是上面三个属性的shorthand，among others）

...您可以通过设置此规则使网格区域跨越所有列：

grid-column: 1 / -1;

这告诉网格区域从第一列线跨越到最后一列线，我相信这符合您规定的 objective:

"We would need to apply something like grid-column: span ALL (if something like that exists), with meaning that ALL = till the end of current row."

jsFiddle demo

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

.grid-second {
  grid-column: 2 / -1;
  background-color: red;
}


/* Not important fancy styles */

.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}

<div class="grid">
  <div class="grid-first">First</div>
  <div class="grid-second">Second (Want till end)</div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
</div>

使网格列跨越整行

Make a grid column span the entire row

css

grid

css-grid

jsFiddle demo