Question

据我了解，任何flexbox都可以做，css-grid也应该能够做到（通常更加冗长）。

然而，我无法弄清楚如何使用margin: auto

推送其他项目来模仿Flexbox

＆＃13;

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

＆＃13;

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

＆＃13;

查看所有单元格的大小是如何根据其内容调整的，最后li推送其他单元格以显示在最后？

如何在不修改html添加元素的情况下使用css-grid执行此操作？

＆＃13;

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

＆＃13;

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

＆＃13;

这很接近，但所有行的大小都不是min-content - 我不知道它们的大小是什么，但它不是min-content。我最接近的是添加

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

虽然有效，但前提是你知道提前li的数量，这对于flexbox版本是不必要的。

Answer 1

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

弹性容器，
弹性项目。

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

网格容器，
行/列（＆＃34;曲目＆＃34;）和
网格项目（存在于轨道内）。

在Flex项目上设置auto页边距时，会占用容器中的空格。这足以让物品远离其兄弟姐妹。你已经完成了。

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

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

Grid没有模仿这种Flexbox行为的方法，因为如上所述，在一种情况下，您有一个容器 - 项目关系，而在另一种情况下，您有一个容器 - 跟踪 - 项目关系

换句话说，由于您在Flexbox中处理同一行中所有的项目，因此它们之间的间距很容易。由于您正在处理网格中不同行中存在的项目，因此复杂性更高。

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

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

以下是另外两个Flexbox可能具有优势的例子：

How to get grid items of different lengths to wrap?

Sticky footer in css grid

Answer 2

有一种方法可以获得您的请求，这可以被视为有点hackish，但这是有效的。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Grid 非常适合在 2 维中排列 html 块。我会在这些 html 块中使用 flexbox 来安排内容。 Grid 就像 html 表格，而 flexbox 就像 inline-block。

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/

可以像在Flexbox中一样在CSS Grid中使用自动边距吗？

4 个答案: