css - 如何使 CSS 网格根据元素的大小设置其高度而不挤压？

Question

我有一个带有动态元素数量的 CSS 网格。我用这段代码设置它：

  display: grid;
  margin: 0;
  padding: 0;
  height:100%;
  grid-template-rows: repeat(auto-fit, 200px);
  grid-template-columns: repeat(3, 200px);
  gap: 15px;
  grid-auto-flow: row dense;

这非常适合.. 创建一个网格，其中包含许多适合 3 列的正方形。现在，当元素的数量大于适合屏幕高度的数量时，就会出现问题。不是自动调整高度以适应 200 像素（模板大小）的元素，而是在底部缩小新添加的单元格。

如果我只是删除 height:100%，那么所有元素都会缩小并且不遵守 200px / 200px 规则。如何让它发挥作用？

标签： css