我有这样的布局：

基本上，HTML和CSS如下：

<style>
  section { display: grid,grid-template-columns: repeat(3,1fr) };
  div::first-child: { grid-column: 1/3}
</style>
<section>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</section>

当视口变小时，我希望网格具有2列，然后是1列。我可以使用媒体查询并重新定义列数，但是我想知道是否有使用auto-fill函数的简便方法？

This answer显示了如何通过定义列的宽度来做到这一点，但理想情况下，我不想这样做，而是根据列数的可用空间来确定宽度。