CSS自动网格项高度疑问：未指定高度时.grid-item如何确定高度？

问题描述 #

我并未给.grid-item指定高度，原本以为它不会有高度，但实际并非如此，请问.grid-item是如何确定自身高度的？

相关代码如下：

CSS代码 #

.wrapper {
    width: 90%;
    margin: 200px auto;
    border:solid 3px palegreen;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}


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

HTML代码 #

<body>
    <div class="wrapper">
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
    </div>
</body>

解答 #

.grid-item的高度由它所在的Grid单元格高度决定，而这个单元格高度是Grid容器的行分配规则与内部图片约束共同作用的结果，具体拆解：

• 首先，.wrapper作为Grid容器，grid-template: repeat(3, 1fr) / repeat(3, 1fr)等价于设置了grid-template-rows: repeat(3, 1fr)和grid-template-columns: repeat(3, 1fr)。1fr单位会把容器的可用空间等分成3份，每行、每列各占1份。
• 虽然.wrapper没有显式设置高度，但Grid容器的高度默认会被内部内容撑开。你给图片设置了width:100%; height:100%，这意味着图片的高度会完全继承父元素.grid-item的高度，同时object-fit:cover会保持图片的原始宽高比，只裁剪超出部分。
• 这里形成了一个联动逻辑：Grid行的高度是容器总高度的1/3，容器总高度等于3行高度之和，而图片高度又等于.grid-item的高度（即Grid单元格高度）。浏览器会自动计算出平衡值——让每行高度匹配列的宽度（因为图片有固定宽高比，height:100%会迫使Grid项高度对齐列宽，最终形成正方形网格）。
• 总结来说：.grid-item作为Grid项目，默认会填满所在的Grid单元格，而单元格高度由Grid容器的行分配规则（repeat(3,1fr)）和内部图片的尺寸约束共同决定，最终呈现出可见的高度。

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