CSS网格容器的最小高度

Question

我在以响应方式设置我的网格容器时遇到问题，以便将其高度扩展到内容。调整窗口大小时，网格本身会正常启动，但是不幸的是，即使我使用的是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));

至：

grid-template-rows: repeat(minmax(min-content, max-content));

这里是一个例子：

JSFiddle