如何让CSS Grid实现类似Flexbox justify-content:space-between的分布效果？

问题描述 #

我需要创建一个2行3列的CSS Grid布局，列宽采用1fr 1fr 1fr设置，每个网格项内包含一个max-width: 512px的<img>元素，同时为网格设置了margin: 0 3.75rem。目前遇到的问题是网格项的尺寸大于内部内容（512px），我希望让这个Grid布局达到与设置了justify-content: space-between;的Flexbox相同的视觉效果，是否有类似gap: auto的解决办法？我知道可以拆分为两个Flexbox行来实现，但我必须使用Grid布局。

现有代码：

#grid {
    margin: 0 3.75rem;
    display: grid;
    grid-template:
    "1 2 3" auto
    "4 5 6" auto / 1fr 1fr 1fr;
    width: 100%;
}

.gridItem {
    height: 56rem;
    border: 1px solid #000000;
}

.img {
    width: 100%;
    max-width: 512px;
    height: auto;
    border: 1px dashed #cb34ed;
}

<div id="grid">
    <div id="1" class="gridItem"><div class="img"></div></div>
    <div id="2" class="gridItem"><div class="img"></div></div>
    <div id="3" class="gridItem"><div class="img"></div></div>
    <div id="4" class="gridItem"><div class="img"></div></div>
    <div id="5" class="gridItem"><div class="img"></div></div>
</div>

解决方案 #

核心是调整Grid的列宽规则，同时利用Grid原生支持的justify-content属性实现两端对齐，具体修改如下：

1. 将列宽从1fr 1fr 1fr改为repeat(3, max-content)，让每列宽度由内容（即图片的最大512px宽度）决定，避免网格项被强制拉伸。
2. 给Grid容器添加justify-content: space-between，让列在容器可用空间内两端对齐，中间空白自动分配，完全匹配Flexbox的对应效果。
3. 为网格项添加width: fit-content，确保其宽度严格贴合内部内容，不会被Grid容器拉伸。

修改后的CSS代码：

#grid {
    margin: 0 3.75rem;
    display: grid;
    grid-template-columns: repeat(3, max-content); /* 列宽随内容自适应 */
    grid-template-rows: repeat(2, auto); /* 行高自适应内容 */
    justify-content: space-between; /* 实现两端对齐 */
    gap: 0; /* 若不需要固定间距可设为0，需固定间距则替换为对应值如1rem */
}

.gridItem {
    height: 56rem;
    border: 1px solid #000000;
    width: fit-content; /* 确保网格项宽度贴合内容 */
}

.img {
    width: 100%;
    max-width: 512px;
    height: auto;
    border: 1px dashed #cb34ed;
}

补充说明 #

• max-content会让列宽取内容的最大宽度（这里对应图片的max-width: 512px），保证网格项不会超出内容尺寸。
• Grid容器的justify-content属性作用与Flexbox一致，当总列宽小于容器宽度时，会自动分配剩余空间实现两端对齐。
• 若需要保留列之间的固定间距，只需调整gap值即可，不会影响两端对齐的效果。

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