如何跨度到隐式网格中的最后一列? [英] How to span to the last column in an implicit grid?

问题描述

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

I want an item to start at the first column and end at the last column, no matter how many columns there are.

它应该像这样工作:

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

根据MDN:

将第n条网格线分配到网格项目的位置.如果给定一个负整数，则从显式网格的末尾开始，反向计数.

Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

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

So this would only work on explicit grids? Why shouldn't it work on implicit grids?

推荐答案

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

Why shouldn't it work on implicit grids?

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

Because we can easily run on undefined cases¹ or a cyclic dependency. If it was the implicit grid, it means that we need to first place all the others element to identify the implicit grid then we place our element BUT if we place our element we will obtain another implicit grid so technically you cannot know the implicit grid without placing the element.

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

The idea behind the implicit grid is to place the element that doesn't have anything defined for their placement automatically after placing the ones with known places.

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

You can overcome this by using some hacks either for row or column:

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

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

¹ 一个基本示例:

.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列的隐式网格.

Logically we will first place the blue span in the explicit grid then the we place the red one automatically to obtain an implicit grid of 2 columns.

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

Considering your logic I have the following cases:

1. 我更改了蓝色的位置，因此它占用了两列，将红色移到了第三列.我再次重复(无限循环)

1. I change the place of the blue so it takes the two columns which will move the red to a third one. I repeat again (an infinite loop)

我更改了蓝色的位置，因此它占据了两列并与红色的列重叠(不是很合逻辑和直观)

I change the place of the blue so it takes two columns and overlap the red one (not really logical and intuitive)

我不放置蓝色，但是我先放置红色，然后将红色重叠(不合逻辑)，或者将蓝色放置在该列中，然后将红色推入另一个，然后返回(1)

I don't place the blue but I first place the red then I either overlap the red one (not logical) or I place the blue in that column and push the red to anoher one and I get back to (1)

这篇关于如何跨度到隐式网格中的最后一列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！