在CSS网格中使用自动填充（列的数量将改变）时，是否可以在没有媒体查询的情况下使用多列元素？

我在不使用媒体查询的情况下生成一个列数为dinamic的网格（

网格模板列：重复（自动填充，最小值（288px，1fr））

）。将有一些大小不同的元素，如（列x行）：

我尝试了各种各样的

网格列

：比如

auto/span 4

1/4

等等。问题是，在较小的屏幕上，列的数量较少，我正在强制增加需要填充这些元素的列的数量，以便在最后挤压最新的列，而它们不应该就在那里。 真的有办法做到吗？或者我应该回到媒体查询，或者干脆用flex来做

当前示例：

.grid{
显示：网格；
网格间距：1rem；
网格模板列：重复（自动填充，最小值（288px，1fr））；
最大宽度：1170px；
宽度：100%；
调整大小：水平；
保证金：自动；
}
埃莱先生{
最小高度：185px；
背景色：#F2F2；
边框：1px实心；
填充：1em；
}
埃勒广场酒店{
格构柱：跨度2；
网格行：跨度2；
}
.ele.全宽{
网格柱：自动/跨度4；
网格行：自动/跨度4；
}

广场
全宽

 - 2 x 2 (square element)
 - 3 x 2 (long element)
 - (1/3)% x 2 (1/3 of the grid wide x 2 rows tall)
 - (1/2)% x 2 (half of the grid wide x 2 rows tall)
 - Full width (100% grid wide x 2 rows tall)