React+CSS column-count实现瀑布流如何拉伸图片填满容器

纯CSS column-count 实现的瀑布流无法做到拉伸图片填满每行空隙。
多列布局的排布逻辑是纵向优先：内容从上到下依次填充当前列，填满整列高度后才会流入下一列，布局计算时完全没有「横向行对齐」的规则，天然和行拉伸填满的效果逻辑冲突，flex的stretch对齐能力完全无法在这个布局模型下生效。
不要尝试在现有column-count结构里硬改图片高度做拉伸：多列布局的内容填充流是浏览器自动计算的，手动修改单张图高度会打乱整个列的排布顺序，反而会出现更多不规则空隙，同时图片强制拉伸变形会严重影响显示效果。

全程不需要引入任何外部依赖，就能实现无空隙的网格效果：

• 方案1：JS动态计算列高分配（保留传统瀑布流错落感）
  实现逻辑：
  1. 预加载所有图片，拿到每张图的原始宽高比
  2. 根据容器宽度、设置的列数算出单列宽度，提前算出每张图渲染后的自然高度
  3. 维护每一列的当前累计高度，每次把下一张图分配给当前总高度最短的列
  4. 所有图分配完成后，给高度最短的列里的最后1-2张图设置微小的高度增量，把列之间的高度差抹平，就能做到容器底部完全齐平、无多余空隙
     你现有代码可以先补基础样式，避免图片被列截断：

  const MasonryCell = (props: any) => {
    return(
        <img 
          src={props.src} 
          alt="cat" 
          style={{
            width:'100%',
            display: 'block',
            breakInside: 'avoid'
          }}
        />
    )
  }
  export {MasonryCell}
  

  后续把列分配、高度计算的逻辑写到你现有的useMasonryGrid hook里即可。
• 方案2：CSS Grid实现（严格无空隙，对齐精度最高）
  如果你可以接受放弃传统瀑布流的完全错落感，换成严格对齐的网格效果，CSS Grid是实现成本最低的方案：
  1. 给网格容器设置grid-auto-rows为一个小的基准高度单位（比如10px）
  2. 图片加载完成后，根据图片实际高度和基准单位的比值，给对应卡片设置grid-row: span N，让卡片跨对应数量的行
     替换后的MasonryGrid容器样式参考：

  <div 
    ref={masonryGridRef} 
    style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${props.numberOfColumns}, 1fr)`,
      gridAutoRows: '10px',
      columnGap: 0,
      rowGap: 0,
      maxWidth:1200,
      margin: '0 auto',
      fontSize: 0
    }}
  >
    {props.children}
  </div>
  

  这种方案下布局是二维计算的，天然不会出现横向空隙，不需要强制拉伸图片变形。

column-count属于CSS多列排版模块，设计初衷是实现类似报纸的文字分栏阅读，并非为卡片网格布局设计。它的内容流是纯纵向的，浏览器布局时不会感知横向相邻列的元素位置，没有任何原生CSS属性可以支持跨列元素的横向高度对齐拉伸。

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