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

Question

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

它应该像这样工作：

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

根据 MDN：

将第 n 条网格线添加到网格项的位置。如果给出负整数，则相反，从显式网格的结束边缘开始计数。

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

Answer 1

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

因为我们可以很容易地在未定义的情况¹或循环依赖上运行。如果是隐式网格，这意味着我们需要首先放置所有其他元素来识别隐式网格，然后我们放置我们的元素但是如果我们放置我们的元素，我们将获得另一个隐式网格，因此从技术上讲，没有隐式网格您无法知道放置元素。

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

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

将元素拉伸到自动计算网格的末尾，而不仅仅是显式网格

在响应式网格布局中强制列为空

¹一个基本的例子：

.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. 我改变了蓝色的位置，所以它需要两列，将红色移动到第三列。我再重复一遍（无限循环）

2. 我改变了蓝色的位置，所以它需要两列并与红色一列重叠（不是很合乎逻辑和直观）

3. 我没有放置蓝色，但我首先放置红色，然后我要么与红色重叠（不合逻辑），要么将蓝色放在该列中并将红色推到另一个，然后我回到（1）