CSS Grid跨列区域长内容影响前两列自动宽度如何纯CSS解决

解决方案 #

仅需修改两处CSS即可实现需求，无需调整HTML结构：

1. 给网格容器显式指定列宽计算规则
2. 让跨列的a3区域不参与列宽计算，渲染时再占满整行宽度

修改后的核心代码如下：

.grid {
  width: 300px;
  display: grid;
  grid-template-areas:
    "a1 a2"
    "a3 a3";
  /* 新增：显式指定两列默认自动分配宽度 */
  grid-template-columns: auto auto;
  border: 1px solid black;
  overflow: hidden;
}

.item--3 {
  grid-area: a3;
  /* 新增：列宽计算阶段忽略该元素的内容宽度 */
  width: 0;
  /* 新增：实际渲染时强制占满整行宽度 */
  min-width: 100%;
}

原理解释 #

CSS Grid默认计算auto列宽时，会把所有行（包括跨列行）的内容宽度纳入计算逻辑：跨列的a3内容过长时，浏览器会将溢出的宽度平均分配给两个列，导致第一行的列宽被异常撑开。
新增样式会让浏览器计算列宽时直接忽略a3的内容宽度，仅根据第一行a1、a2的内容计算列宽，最终渲染时再让a3强制占满已经计算完成的整行宽度，完全符合预期效果。

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