css - 使网格列跨越整行

Question

假设我们有 2 个 CSS Grid 容器，其中动态列数基于宽度。

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

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

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

在更窄的包装上:

我们需要应用类似grid-column: span ALL (如果存在类似的东西)，这意味着 ALL = 直到当前行的末尾。

真正重要的是“第一”列应始终与“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>

附言。请不要使用媒体查询发布解决方案。我对任何(即使是小的 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(这是上面三个属性的简写，among others)

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

grid-column: 1 / -1;

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

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