CSS Grid实现指定行不参与列宽计算并自动换行

要实现让CSS Grid的列宽由其他单元格决定，同时指定行（.other）根据已有列宽自动换行，可按以下方式调整代码：

核心修改点 #

• 给网格容器添加width: fit-content;，让容器宽度由前面行的单元格内容决定，避免被长文本行撑大
• 确保跨列元素的文本能自动换行（可选增强，避免极端情况溢出）

修改后的CSS代码 #

.grid-container{
 display: grid;
 gap: 20px;
 grid-template-columns: auto auto auto;
 width: fit-content; /* 关键：容器宽度适配前面列的内容 */
 .see-all{
   display: grid;
   grid-column-start:1;
   grid-column-end:4;
   grid-template-columns:subgrid;
   :nth-child(1){
     column:1;
   }
   :nth-child(2){
     column:2;
   }
   :nth-child(3){
     column:3;
   }
  }
  .other{
    grid-column: 1 / span 3;
    word-wrap: break-word; /* 确保长文本强制换行 */
  }
}

HTML代码（无需修改） #

<div class="grid-container">
 <div class="see-all">
    <div>Apple</div>
    <div>Banana</div>
    <div>Coconut</div>
  </div>
  <div class="see-all">
    <div>Date</div>
    <div>Eggplant</div>
    <div>Fig</div>
  </div>
  <div class="other">
This row is just too long, I want it to use the width of the column (set by other elements) to then cause this to word wrap.
  </div>
</div>

原理说明 #

1. width: fit-content 会让网格容器的宽度刚好容纳前面两行的三列内容，列宽完全由.see-all中的子元素（比如"Banana""Eggplant"）决定
2. .other设置grid-column: 1 / span 3后，会自动占满三列的总宽度，长文本会在这个固定宽度内自动换行，不会干扰之前的列宽计算

如果不需要body的flex布局，可直接移除body{display:flex;}，避免flex特性影响容器宽度逻辑。

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