如何填充CSS网格中的剩余列

我一直在尝试创建一个响应性强的网格布局，几乎成功了。我能做到这一点：

.container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
}

如果我的网格中有4项，结果如下所示：

=============
= 1 = 2 = 3 =
= 4 =   =   =
=============

=============
= 1 = 2 = 3 =
= 4 = 4 = 4 =
=============

问题是，我希望第四个单元格（在本例中，可以是另一个单元格，具体取决于网格中的项目数量）填充其余的列，如下所示：

=============
= 1 = 2 = 3 =
= 4 =   =   =
=============

=============
= 1 = 2 = 3 =
= 4 = 4 = 4 =
=============

我知道这可以在flex中完成，但如果可能的话，我真的很想用grid来完成

多谢各位

.grid{
显示：网格；
栅隙：16px；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
网格模板行：重复（自动拟合，最小值（100px，1fr））；
}
.表格项目{
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小高度：100px；
背景色：rgba（0,0,0,0.25）；
}

1.
2.
3.
4.

使用CSS网格，完全自动且响应迅速，这是不可能的。我的建议是使用Bootsrap的网格系统。

---

请参阅文档

否…这在CSS网格中是不可能的。必须定义网格子项的宽度。这是Flexbox更好的选择solution@IvanS95你如何用flex解决这个问题？人们来到这个网站是为了寻找答案，而不是推荐。虽然你的文章可能对这个问题有一定的评论价值，但开发者来这里是为了学习如何解决问题，而不是如何用CSS框架来解决问题。