如何让单行独列的Grid项目自动占满剩余空间（类似flex-grow）

完全可以实现，针对你给出的2列Grid布局场景，以下是纯CSS自动适配的解决方案，无需额外HTML结构，也不会干扰子选择器：

最终实现代码 #

<div class="controller">
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">bye</div>
</div>
<style>
    .controller {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }
    .item {
        background-color: aquamarine;
    }
    /* 核心规则：当最后一个项目处于单独一行时，跨列占满整行 */
    .controller .item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
</style>

方案说明 #

• 自动判断逻辑：利用:last-child:nth-child(odd)伪类组合，精准匹配总项目数为奇数的场景（此时最后一个项目必然单独占一行），自动触发跨列规则
• 无选择器干扰：未使用order属性，完全基于结构伪类实现，不会影响其他依赖子元素顺序的选择器逻辑
• 灵活适配扩展：如果是N列布局，只需调整伪类的判断规则，比如3列布局可使用.controller .item:last-child:nth-child(3n + 1)，以此类推

自适应列数场景补充 #

如果是使用repeat(auto-fill, minmax(xxx, 1fr))的自适应列数布局，若希望最后一行的单个项目自动占满整行，可直接给最后一个项目设置grid-column: 1 / -1，该规则会让项目横跨所有列，实现类似flex-grow的填充效果。

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