我的网格中有3列。
我希望他们表现得像这样：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

如以下代码段所示：https://codepen.io/chriscoyier/pen/xBmYJN
除了我希望它每行只有3列，最后一列是3fr（其他2列大小的3倍），即"1fr 1fr 3fr"。我希望最后一列在达到最小宽度时自动转到新行。
在使用上面的例子时，当列不适合时，它们会自动折叠成新的一行。在我的例子中，有没有方法可以做到这一点？不用手动配置网格模板区域并根据@media screen width调整它们？
我假设该功能来自repeat（）的自动填充参数...
第一次