当它进入新行时，如何在整个屏幕宽度上拉伸最后一个网格项目？

Question

我有：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1rem;

当没有足够的空间容纳所有三个容器时，我的一个容器会跳下来。这很好。

那么网格有 2 列和 2 行。我希望最后一个元素占据整个屏幕宽度。因此，要占用 2 个网格行而不是 1 个。我可以使用媒体查询手动执行此操作，但没有更好的方法吗？

Answer 1

不确定在这种情况下网格是否是您的最佳选择。 您可能想要使用 flex 容器，在项目上设置 flex-grow: 1 和 min-width。

例子：

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.item {
  min-width: 30rem;
  flex-grow: 1;
  box-sizing: border-box;
  justify-content: space-between;
}

然后在容器上使用负边距，在项目上加上边距作为间隙。