如何在CSS Grid中实现两列等高？grid-auto-rows:1fr无效问题排查

你的核心问题出在布局方向错误和图片容器未适配高度上，导致grid-auto-rows: 1fr没起到预期作用。

错误点拆解 #

1. .storyfeed布局方向搞反
   你设置了grid-auto-flow: column，这会让网格项横向排成一列，而非你想要的每行两列的纵向布局；同时用grid-auto-columns定义列宽也不符合每行两列的需求。

2. 图片容器未填满网格行高度
   .story-img没有设置高度，图片默认按自身尺寸渲染，导致网格行高度被文本容器撑开，图片容器无法和文本容器高度对齐，grid-auto-rows: 1fr在这里无法生效。

修正后的代码 #

CSS部分 #

.storyfeed {
    width: 100%;
    z-index: 5;
    margin-top: 20px;
    display: grid;
    /* 定义每行两列，列宽均分 */
    grid-template-columns: repeat(2, 1fr);
    /* 可选：添加列间距，优化视觉效果 */
    gap: 20px;
}

.story {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* 让网格行高度自动匹配内容，确保两列高度一致 */
    grid-auto-rows: auto;
    z-index: 5;
}

.story-img {
    /* 让图片容器填满网格项高度 */
    height: 100%;
}

.story-img img {
    width: 100%;
    height: 100%;
    /* 保持图片比例并填满容器，避免拉伸变形 */
    object-fit: cover;
}

.story-squib {
    padding: 10px 20px;
    background-color: #eae9e1;
    overflow: hidden;
}

.story-head {
    font-family: 'Montserrat';
    color: #4a5831;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 2rem;    
}

.story-body, .story-date {
    font-family: 'Montserrat';
    color: #96968a;
    font-weight: 600;
    font-size: 1rem;    
}

.story-date {
    margin-bottom: 10px;
}

HTML部分（无需修改） #

<div class="storyfeed">
    <a href="https://www.post-gazette.com/sports/jason-mackey/2025/04/07/nfl-free-agency-aaron-rodgers-pat-mcafee-show/stories/202504060108">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test/img/bar.jpg" class="width-100"></div>
                <div class="col story-squib">
                    <div class="story-head">Iconic bars</div>
                    <div class="story-date">April 20, 2025</div>
                    <div class="story-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
            </div>
        </div></a>
        
    <a href="https://www.post-gazette.com/sports/paul-zeise/2025/04/07/nil-house-ncaa-settlement-pitt/stories/202504030112">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test/img/arnold-palmer-drink.jpg" class="width-100"></div>
                <div class="col story-squib">
                    <div class="story-head">Arnold Palmer and the Arnold Palmer</div>
                    <div class="story-date">April 18, 2025</div>
                    <div class="story-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
            </div>
        </div></a>
</div>

关键修正说明 #

• 将.storyfeed的grid-auto-flow: column和grid-auto-columns替换为grid-template-columns: repeat(2, 1fr)，实现每行两列的布局。
• 给.story-img设置height: 100%，并给内部图片添加object-fit: cover，确保图片填满容器且比例正常，同时让图片容器高度与文本容器对齐。
• 移除.storyfeed和.story中无用的grid-auto-rows: 1fr，改用grid-auto-rows: auto让网格行自动匹配内容高度，保证两列高度一致。

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