小编Alb*_*lad的帖子

我的网格中有 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;
}

当我将 Redux Toolkit Query 与 redux-persist 结合使用时会发生什么？

它会使用持久状态还是会重新获取状态？