如何让大量grid子元素自适应缩小放入grid容器而不出现滚动条

解决方案 #

你只需要修改几处CSS规则即可实现需求：

• 移除.right选择器下的overflow-y: scroll、align-content: flex-start属性，前者是滚动条出现的原因，后者会让所有网格行顶对齐，不会自动拉伸占满容器空间
• 给.right新增grid-auto-rows: 1fr，让动态生成的行自动均分容器的可用高度
• 给.item和.item img补充height: 100%属性，保证子元素和内部图片可以跟随单元格高度自动缩放，不会溢出

修改后的相关CSS代码如下：

.right {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    /* 可选：如果需要单元格之间有间距可以加gap，比如gap: 4px; */
}

.item {
  width: 100%;
  height: 100%;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

修改后不管你动态生成多少个子元素，都会保持4列布局，行高自动压缩适配，所有元素全部展示在容器内不会出现滚动条。

内容的提问来源于stack exchange，提问作者Fikirat Javadov