CSS网格换行没有重复和自动填充？

Question

我的网格中有 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屏幕宽度调整它们？

我假设该功能来自重复（）的自动填充参数...

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

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

.grid>div {
  background: #EDE7F6;
  padding: 1.5rem;
  border-radius: 1rem;
}

body {
  margin: 2rem;
  font: 12px system-ui;
}

Answer 1

这确实是可能的。技巧是将第三列分配为跨 3 列，同时保留grid-template-columntoauto-fill或auto-fit。

此外，通过使用auto-fit列，可以更好地调整它们，因为它们适合可用空间。

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

div.col3 {
  grid-column: span 3;
}

<div class="container">
  <div class="col1">First</div>
  <div class="col2">Second</div>
  <div class="col3">Third</div>
</div>

代码笔