Question

无论项目有多少列，我都希望项目从第一列开始到最后一列结束。

它应该像这样工作：

item {
  grid-column-start: 1;
  grid-column-end: -1;
}

according to MDN:

将第n条网格线分配给网格项目的位置。如果给定一个负整数，则从显式网格的末端开始倒数。

所以这仅适用于显式网格吗？为什么它不能在隐式网格上工作？

Answer 1

为什么它不能在隐式网格上工作？

因为我们可以轻松地在未定义的情况下运行¹或循环依赖项。如果它是隐式网格，则意味着我们需要首先放置所有其他元素以标识隐式网格，然后放置元素BUT，如果放置我们的元素，我们将在技术上获得另一个 implicit 网格。您必须先放置元素，才能知道隐式网格。

隐式网格背后的想法是，在放置具有已知位置的元素之后，自动放置没有为其放置定义任何元素的元素。

您可以通过对行或列使用一些技巧来克服这一点：

Stretch an element to the end of the automatically calculated grid, not just the explicit grid

Forcing a column to be empty in a responsive grid layout

¹一个基本示例：

.grid {
  display: grid;
  grid-template-columns: 50px;
  grid-gap: 5px;
  grid-auto-flow: column;
  grid-auto-columns:50px;
}

.grid>span {
  height: 50px;
  background: red;
}

.grid>span.place {
  grid-column: 1 / -1;
  background: blue;
}

<div class="grid">
  <span></span>
  <span class="place"></span>
</div>

从逻辑上讲，我们首先将蓝色跨度放置在显式网格中，然后将红色跨度自动放置以获得2列的隐式网格。

考虑到您的逻辑，我遇到以下情况：

我更改了蓝色的位置，因此它占用了两列，将红色移到了第三列。我再次重复（无限循环）
我更改了蓝色的位置，因此它占据了两列并与红色的列重叠（不是很合逻辑和直观）
我不放置蓝色，但是我先放置红色，然后将红色重叠（不合逻辑），或者将蓝色放置在该列中，然后将红色推入另一个，然后返回（1）

Answer 2

那么这仅适用于显式网格吗？为什么它不能在隐式网格上工作？

因为这就是Grid specification中定义的内容。

§ 7.1. The Explicit Grid

网格放置属性中的数字索引从边缘开始计数   显式网格。正索引从开始算起   （从1开始为最开始的显式行），而为负   索引从末端开始计数（从-1开始到最末端   显式行）。

这是Grid技术的当前状态。规范仅处于1级。它还不能做所有事情。

以下是该规范的将来版本中可能会满足的一些愿望清单项目：

似乎Grid Level 2中正在处理子网格功能。

Answer 3

这会将项目扩展到最后一个可用列：

grid-column-end: max-content;

Answer 4

grid-column-end: max-content;

确实有效

如何跨越到隐式网格的最后一列？

4 个答案: