CSS Grid中如何排列图片，解决SVG占不满单元格高度的问题

问题原因 #

• 疑问1核心逻辑：Grid轨道使用1fr赋值时，默认对应的尺寸规则是minmax(auto, 1fr)，其中auto的最小尺寸会跟随内容的固有大小计算。你的SVG图片本身固有高度很高，会直接把Grid行轨道的最小高度撑大，此时行高已经被内容撑开，你给图片设置height: 100%是基于被撑大后的行高计算，自然不会达到适配效果。
• 疑问2核心逻辑：套的div作为Grid的直接子项，同样遵循Grid子项默认min-height: auto的规则，会被内部的图片撑大高度，此时div的高度本身就已经超出了原本等分的单元格高度，图片设置100%高度自然也会跟着超出。

解决方案 #

核心修改点是取消Grid轨道默认的内容撑开限制，将1fr改为minmax(0, 1fr)，强制轨道按照比例分配尺寸，再配合图片的自适应规则即可实现需求。

场景1：图片直接放在Grid容器中 #

/* 先确保html和body有明确高度，否则.content的80%高度会失效 */
html, body {
    margin: 0;
    height: 100%;
}
.content {
    width: 80%;
    height: 80%;
    background-color: beige;
    display: grid;
    /* 改为minmax(0, 1fr)，取消内容撑开限制 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.content__img {
    display: block;
    /* 宽高都设为100%适配单元格 */
    width: 100%;
    height: 100%;
    /* 保持图片比例，需要完整显示不裁剪就改为contain */
    object-fit: cover;
}

场景2：图片套在div容器中 #

html, body {
    margin: 0;
    height: 100%;
}
.content {
    width: 80%;
    height: 80%;
    background-color: beige;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.content__img-box {
    /* 取消Grid子项的默认最小高度限制 */
    min-height: 0;
    width: 100%;
    height: 100%;
}
.content__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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