自动边距能否像在Flexbox中一样在CSS Grid中工作？

Question

据我了解，flexbox可以做的任何事情，css-grid也应该可以做（通常更为冗长）。

但是我不知道如何用一个项目将其他项目推到 margin: auto

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

看看所有单元格如何调整大小以适应其内容，最后一个单元格li将其他单元格推开以显示在最后吗？

我如何在不修改我的HTML来添加元素的情况下使用CSS网格呢？

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

这很接近，但是所有行的大小都不是min-content-我不知道它们的大小是多少，但大小不是min-content。我能得到的最接近的是添加

grid-template-rows: repeat(3, min-content);

仅当您li提前知道s 的量（对于flexbox版本不是必需的）时，此方法才有效。

Answer 1

一般来说，要在flexbox中进行对齐，需要管理两个级别：

1. flex容器，以及
2. 弹性项目。

在CSS Grid中，需要管理三个级别：

1. 网格容器，
2. 行/列（“轨道”），以及
3. 网格项（存在于轨道中）。

在auto弹性项目上设置边距时，它会占用容器中的空间。这足以将一个项目与其兄弟姐妹隔开。你完成了。

在auto网格项目上设置边距时，它会占用轨道中的空间（而不是容器）。因此，您的足迹不会受到auto利润的影响。

您可以在“网格”示例中看到这一点。带的项目margin-top: auto固定在轨道的底部。在Flex示例中，它固定在容器的底部。

Grid没有任何apples-to-apples方法来模拟此flexbox行为，因为如上所述，在一种情况下，您具有容器-项目关系，而在另一种情况下，您具有容器-轨道-项目关系。

换句话说，由于您要处理的所有项目都位于flexbox 的同一行中，因此它们之间的间距很容易。由于您要处理Grid中不同行中存在的项目，因此更加复杂。

您需要将auto边距应用于网格行，而不是项目，以使其表现得像flexbox。或者，您需要定位并扩展特定的grid-row-gap。这些方法都不存在。规范没有提供auto网格轨迹上的边距或同一轴上网格间隙上的多个值。

CSS Grid不能代替flexbox。它甚至不打算成为增强版本。因此，期望发现弹性比网格更有用的情况。这篇文章就是一个例子。

以下是flexbox可能具有优势的其他两个示例：

• 如何获取不同长度的网格项进行包装？
• CSS网格中的粘性页脚

Answer 2

有一种方法可以获取您的请求，可以认为有点黑客，但这是有效的。

在所有列表元素和最后一个元素之间创建任意数量的未使用行。只要列表元素少于 99 个，这里的代码片段就可以工作：

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 150px;
  background-color: lime;
  grid-template-rows: repeat(99, max-content) 1fr [last];
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  grid-row: last;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>