如何让grid-item占据整行或剩余网格单元格，适配多端显示场景？

Grid布局实现动态占满剩余列的方案 #

不需要额外加类名控制，用Grid原生的负网格线特性即可实现需求，具体配置如下：

移动端网格配置调整 #

• 保留你原有桌面端grid-template-columns: repeat(3, 1fr)的配置不变
• 移动端不需要完全重置列配置，只需要调整两个grid-item的列定位规则：
  1. 给绿色块设置grid-column: span 1 / -1，固定让绿色块永远占据网格最右侧的1列
  2. 给蓝色块设置grid-column: 1 / -2，让蓝色块从网格最左侧开始，一直占据到倒数第二条列线

适配逻辑说明 #

• 存在绿色块时：网格的倒数第二条列线就是绿色块的左边界，蓝色块自然占满绿色块之外的所有宽度，符合你第二种移动端状态的需求
• 绿色块不展示（设置display: none）时：网格内只有蓝色块一个元素，倒数第二条列线自动和网格最右边界重合，蓝色块直接占满整个网格宽度，自动适配第三种状态

拓展适配方案 #

如果你的移动端列数后续有调整需求，还可以用更灵活的隐式网格配置：
移动端将网格设置为grid-template-columns: 1fr auto，蓝色块不需要额外加grid-column属性，默认会占据1fr的自动伸缩宽度，绿色块占据auto宽度，绿色块隐藏时蓝色块自动撑满整个容器，这种写法和flex的flex-grow实现逻辑一致。

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