css - 如何跨度到隐式网格中的最后一列？

我想要一个元素从第一列开始，到最后一列结束，无论有多少列。

它应该像这样工作:

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

according to MDN:



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

最佳答案

因为我们可以轻松地在未定义的case1或循环依赖项上运行。如果它是隐式网格，则意味着我们需要首先放置所有其他元素以标识隐式网格，然后放置元素BUT如果放置我们的元素，我们将获得另一个隐式网格，因此从技术上讲，如果没有放置元素。

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

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

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

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)