Javascript 防止；“寡妇”一行中的项目-使用css网格时

我创建了一个响应网格，它应该包含4、3、2或1个项目的行，具体取决于窗口大小。设计的硬要求是不允许有寡妇和半满行。所以对于11项，可能有两行四项和一行三项，或者三行三项和一行两项，或者。你明白了

为了解决这个问题，我创建了一个css网格：

这可以很好地调整大小，但不能解决寡妇问题。起初，我用一个

last of type

选择器选择最后一个项目，并给它一个

网格行：1/-1

样式，但这并不能确保上面的行被完全填充

我想不会有一个css唯一的解决方案。有没有一种方法让一个元素意识到它在一行中是单独的，或者它必须增长才能填充该行？我有一个想法，使用

nextSibling

属性通过JavaScript选择最后一个子项，并可能通过页面偏移量确定它是否填充整行。但我的问题是我不能硬编码屏幕的宽度

或者，是否有一种方法可以告诉元素扩散到行的末尾？我试过这个，但不起作用：

.card:last-of-type {
  grid-column-end: span -1;
}

对于最小的可重复性示例。

使用溶液代替。这样，它可以随着屏幕大小而伸缩。 对于4列布局，我们使用

25%

。减去

1rem

以获得一点边距。（左0.5+右0.5）

（全屏打开代码段以查看其工作情况）

.my-grid{
显示器：flex；
柔性包装：包装；
}
.卡片{
最小宽度：264px；
边界半径：12px；
溢出：隐藏；
盒影：0 1px 1px#00000026；
字体大小：14px；
背景色：红色；
保证金：5雷姆；
弹性：1计算（25%-1雷姆）；
}

1.
1.
1.
1.
1.
1.
1.
1.
1.
布鲁布

什么定义了“半填充行”？这只是“没有2行，也有4行”吗？（我想不出任何其他的方法，如果你没有成为一个寡妇，并且有其他条件的话，你会得到半排）对不起，看起来我不够精确。基本上我的意思是不应该有空的空间。因此，如果一行中有两个元素，那么它们应该增长以完全填充空白。可以在一行中混合项目的数量。所以四个项目，四个项目和两个项目，总共十个项目就可以了。

.card:last-of-type {
  grid-column-end: span -1;
}