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

【问题标题】：How to span to the last column in an implicit grid?如何跨越到隐式网格中的最后一列？
【发布时间】：2019-07-08 09:53:56
【问题描述】：

我希望一个项目从第一列开始，到最后一列结束，不管有多少列。

它应该像这样工作：

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

according to MDN:

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

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

【问题讨论】：

标签： css css-grid

【解决方案1】：

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

因为我们可以轻松地在未定义的情况下运行¹ 或循环依赖。如果是隐式网格，这意味着我们需要首先放置所有其他元素来识别隐式网格，然后我们放置我们的元素但是如果我们放置我们的元素，我们将获得另一个 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)

【讨论】：

【解决方案2】：

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

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

§ 7.1. The Explicit Grid

网格放置属性中的数字索引从边缘开始计数 显式网格。正索引从一开始就计数（从 1 开始最显式的行），而否定索引从末端开始计数（从 -1 开始显式行）。

这就是网格技术的当前状态。该规范仅处于 1 级。它不能做所有事情（还）。

以下是一些愿望清单项目，可能会在未来版本的规范中实现：

看起来Grid Level 2 中正在解决子网格功能。

【讨论】：

【解决方案3】：

grid-column-end: max-content;

确实有效

【讨论】：

请在您的答案中添加解释，“它确实有效”没有用
将列或行的结尾设置为任何未知值会导致跨越两个单元格，这似乎可以在一个小的简单网格中工作，但不幸的是它没有。

【解决方案4】：

这会将项目跨越到最后一个可用列：

grid-column-end: max-content;

【讨论】：