CSS 网格容器最小高度

Question

我在响应式设置我的网格容器时遇到问题，以便它会将其高度拉伸到内容。 当调整 window 的大小时，网格本身可以正常转动，不幸的是，即使我使用 min-height 属性，容器仍保持相同的高度，这导致 9 个单元格中只显示 3 个单元格。溢出：可见也不能解决我的问题。 谢谢你的帮助！

CSS：

#grid_content {
    position: absolute;
    right: 0;
    top: 100px;
    width: calc(100% - 220px);
    padding-bottom: 50px;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));
    min-height: 80vh;
}

.grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    float: left;
}

Answer 1

你可能需要这样的东西，注释掉：

grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));

并引入两个新类，一个用于最小高度，另一个用于最大高度 - 如本例所示：

JSFiddle

删除“溢出：隐藏”部分的注释以查看最终结果。