自动边距可以在 CSS Grid 中像在 Flexbox 中那样工作吗？

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-grid 执行此操作？

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);

只有在您提前知道lis 的数量时才有效，这对于 flexbox 版本不是必需的。

Answer 1

Grid 非常适合在二维中排列 html 块。 我会在这些 html 块中使用 flexbox 来安排内容。 Grid 类似于 html 表格，flexbox 类似于 inline-block。

Answer 2

有一种方法可以获取您的请求，这可能被认为有点骇人听闻，但这是有效的。

在所有列表元素和最后一个元素之间创建任意数量的未使用行。这里的 sn-p 将在列表少于 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>

Answer 3

一般来说，flexbox中的对齐有两个级别需要管理：

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

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

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

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

当您在网格项目上设置auto 边距时，它会消耗轨道中的空间（而不是容器）。所以您的曲目不受auto 边距的影响。

您可以在您的 Grid 示例中看到这一点。带有margin-top: auto 的项目被固定在track 的底部。而在 Flex 示例中，它被固定在容器的底部。

对于 Grid 来说，没有苹果对苹果的方法来模拟这种 flexbox 行为，因为如上所述，在一种情况下，您有一个容器-项目关系，而在另一种情况下，您有一个容器-轨道-项目关系.

换一种说法，因为你处理的是在flexbox中所有在同一行的项目，它们之间的间距很容易。由于您要处理在网格中的不同行中存在的项目，因此更加复杂。

您需要将auto 边距应用于网格行，而不是项目，以使其表现得像 flexbox。或者，您需要定位并扩展特定的grid-row-gap。这些方法都不存在。该规范未提供网格轨道上的auto 边距或multiple values on grid gaps in the same axis。

CSS Grid 不是用来代替 flexbox 的。它甚至不是增强版。因此，期望找到 flex 比 Grid 更有用的情况。这篇文章就是一个例子。

这里有另外两个 flexbox 可能具有优势的例子：

• How to get grid items of different lengths to wrap?
• Sticky footer in css grid

Answer 4

你需要使用grid-template-rows来声明每行占用的区域 在哪里

• minmax(1px, auto) 定义最小高度为1px，最大高度可以随着前3 li的内容动态增加而扩展。
• 1fr 是last li整个剩余空间的 1 分之一。

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
  grid-template-rows: minmax(1px, auto) minmax(1px, auto) minmax(1px, auto) 1fr;
}

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>

进一步说明，CSS Grid 并没有真正取代 flexbox。 https://css-tricks.com/css-grid-replace-flexbox/