CSS Grid中span>1的单元格异常收缩而span=1正常的原因是什么？

问题原因 #

该现象是CSS Grid原生的轨道尺寸计算规则导致的：

• 仅跨1列的单元格会直接参与对应列的最小宽度计算，列不会缩到比单元格内容更小，所以不会出现内容裁剪
• 跨多列的单元格默认不会参与fr单位列的最小宽度计算。你代码中repeat(16, 1fr)的1fr实际等价于minmax(0, 1fr)，列的最小宽度被默认设为0，所以列可以无限缩小，最终导致跨列单元格的内容被裁剪。

解决方案 #

仅需要修改网格的grid-template-columns定义，将1fr替换为minmax(auto, 1fr)即可，全程保留grid布局，无需调整其他代码：
修改后的网格代码示例：

<div class="grid" style="grid-template-columns: repeat(16, minmax(auto, 1fr));">
  <div class="item" style="grid-column: auto / span 2;">Why</div>
  <div class="item" style="grid-column: auto / span 1;">all</div>
  <div class="item" style="grid-column: auto / span 2;">the</div>
  <div class="item" style="grid-column: auto / span 1;">cells</div>
  <div class="item" style="grid-column: auto / span 2;">with</div>
  <div class="item" style="grid-column: auto / span 1;">a</div>
  <div class="item" style="grid-column: auto / span 1;">span</div>
  <div class="item" style="grid-column: auto / span 2;">value</div>
  <div class="item" style="grid-column: auto / span 1;">over</div>
  <div class="item" style="grid-column: auto / span 2;">one</div>
  <div class="item" style="grid-column: auto / span 1;">shrinks?</div>
</div>

方案说明 #

minmax(auto, 1fr)会强制网格计算列最小宽度时同时纳入单列、跨列元素的内容宽度：跨列单元格的最小内容宽度会被分摊到它所跨越的所有列上，保证列总最小宽度不会小于跨列单元格的内容宽度，从根本上避免内容裁剪问题。

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