如何不使用Flex Box让CSS Grid填充行与行之间的空白区域

问题原因 #

你为.Playlists设置了height: 100%的明确容器高度，Grid布局默认align-content属性值为stretch，会让所有网格行平分拉伸填满整个容器的高度，所以当项目数量较少时，行与行之间就会出现大面积空白。你之前调整grid-auto-flow没有生效，是因为这个属性只控制网格自动排列的方向和空白单元格填充规则，和行间距拉伸无关。

解决方案 #

在原有样式基础上新增align-content: start;属性即可，该属性会让所有网格行靠容器顶部排列，多余的空白统一留在容器底部，不会再出现行间距异常拉伸的问题，同时完全保留Grid的换行布局规则，不需要改用Flex。

修改后的完整代码如下：

.Playlists {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-flow: row dense;
    height: 100%;
    overflow-y: scroll;
    align-content: start; /* 新增这一行 */
}

如果需要更精准控制每行的高度，也可以额外搭配grid-auto-rows属性设置固定值，比如grid-auto-rows: 160px;，可根据你的项目实际尺寸调整参数。

内容的提问来源于stack exchange，提问作者Josh Lee