Reactで、高さの違うカードをすき間なく並べる方法

.columns { column-width: 220px; column-gap: 16px; }
.columns-item { break-inside: avoid; margin-bottom: 16px; }

--- 段組み（column-width: 220px）幅 800px ---
列の数: 3（カードの幅 242.7px）
  1列目（左から 0px）: カード 1, 2, 3, 4 / カードの間 16.0px / 下端 1319.3px
  2列目（左から 259px）: カード 5, 6, 7, 8 / カードの間 16.0px / 下端 1137.3px
  3列目（左から 517px）: カード 9, 10, 11, 12 / カードの間 16.0px / 下端 1246.5px
  重なっているカードの組: 0 / 列の下端の差: 182.0px

段組み: カード 13 を追加 → 左から 517px の列、上から 909.1px / 位置が変わったカード: 4枚（9, 10, 11, 12）

import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import type { ReactNode } from 'react';

type Props<T> = {
  items: T[];
  getKey: (item: T) => string;
  renderItem: (item: T) => ReactNode;
  // 列の幅の目安。この幅を下回らない範囲で、列をいくつ作るかを決める
  columnWidth?: number;
  gap?: number;
};

export function Masonry<T>({ items, getKey, renderItem, columnWidth = 220, gap = 16 }: Props<T>) {
  const containerRef = useRef<HTMLDivElement>(null);
  const observerRef = useRef<ResizeObserver | null>(null);
  const [width, setWidth] = useState(0);
  const [heights, setHeights] = useState(() => new Map<string, number>());

  // 並べる場所の幅を測り、画面の幅が変わるたびに測り直す
  useLayoutEffect(() => {
    const el = containerRef.current!;
    setWidth(el.clientWidth);
    const ro = new ResizeObserver(() => setWidth(el.clientWidth));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // カードの高さを測る。画像が読み込まれたときなど、高さが変わるたびに測り直す
  const measureRef = useCallback((el: HTMLDivElement | null) => {
    if (!el) return;
    observerRef.current ??= new ResizeObserver((entries) => {
      setHeights((prev) => {
        let next = prev;
        for (const entry of entries) {
          const key = (entry.target as HTMLElement).dataset.key!;
          const height = entry.borderBoxSize[0].blockSize;
          if (prev.get(key) === height) continue;
          if (next === prev) next = new Map(prev);
          next.set(key, height);
        }
        // 高さが1つも変わっていなければ、同じ Map を返して再レンダリングを止める
        return next;
      });
    });
    const ro = observerRef.current;
    ro.observe(el);
    return () => ro.unobserve(el);
  }, []);

  // 列の数と1列の幅
  const columns = Math.max(1, Math.floor((width + gap) / (columnWidth + gap)));
  const colWidth = (width - gap * (columns - 1)) / columns;

  // カードを前から順に、いちばん短い列の下へ置いていく
  const colHeights: number[] = new Array(columns).fill(0);
  const positions = items.map((item) => {
    const height = heights.get(getKey(item));
    // まだ高さを測れていないカードは置かない（見えないようにしておく）
    if (height === undefined) return null;
    const col = colHeights.indexOf(Math.min(...colHeights));
    const pos = { x: col * (colWidth + gap), y: colHeights[col] };
    colHeights[col] += height + gap;
    return pos;
  });
  const totalHeight = Math.max(0, Math.max(...colHeights) - gap);

  return (
    <div ref={containerRef} className="masonry" style={{ position: 'relative', height: totalHeight }}>
      {width > 0 &&
        items.map((item, i) => {
          const key = getKey(item);
          const pos = positions[i];
          return (
            <div
              key={key}
              ref={measureRef}
              data-key={key}
              className="masonry-item"
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: colWidth,
                transform: pos ? `translate(${pos.x}px, ${pos.y}px)` : undefined,
                visibility: pos ? 'visible' : 'hidden',
              }}
            >
              {renderItem(item)}
            </div>
          );
        })}
    </div>
  );
}

import { useState } from 'react';
import { Masonry } from './Masonry';
import { CardView } from './CardView';
import { makeCard } from './cards';

export function App({ imageSize = true }: { imageSize?: boolean }) {
  const [cards, setCards] = useState(() => Array.from({ length: 12 }, (_, i) => makeCard(i + 1)));
  return (
    <main>
      <div className="toolbar">
        <button onClick={() => setCards((prev) => [...prev, makeCard(prev.length + 1)])}>カードを追加</button>
        <span className="count">{cards.length}枚</span>
      </div>
      <Masonry
        items={cards}
        getKey={(card) => String(card.id)}
        renderItem={(card) => <CardView card={card} imageSize={imageSize} />}
      />
    </main>
  );
}

import type { Card } from './cards';

// 画像には width と height を書いておく。読み込む前から、縦横比の分の高さが取られる
export function CardView({ card, imageSize = true }: { card: Card; imageSize?: boolean }) {
  return (
    <article className="card">
      <img
        src={`img/${card.imageHeight}.png`}
        alt=""
        {...(imageSize ? { width: 400, height: card.imageHeight } : {})}
      />
      <h2>カード {card.id}</h2>
      <p>{card.text}</p>
    </article>
  );
}

.card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.card img { display: block; width: 100%; height: auto; }

--- Masonry（いちばん短い列へ置く）幅 800px ---
列の数: 3（カードの幅 242.7px）
  1列目（左から 0px）: カード 1, 5, 7, 10 / カードの間 16.0px / 下端 1196.1px
  2列目（左から 259px）: カード 2, 6, 9, 12 / カードの間 16.0px / 下端 1327.7px
  3列目（左から 517px）: カード 3, 4, 8, 11 / カードの間 16.0px / 下端 1179.4px
  重なっているカードの組: 0 / 列の下端の差: 148.3px
並べる場所の高さ: 1327.7px

Masonry: カード 13 を追加 → 左から 517px の列、上から 1195.4px / 位置が変わったカード: 0枚

幅 520px:
列の数: 2（カードの幅 236.0px）
  1列目（左から 0px）: カード 1, 3, 5, 7, 9, 11, 13 / カードの間 16.0px / 下端 2042.0px
  2列目（左から 252px）: カード 2, 4, 6, 8, 10, 12 / カードの間 16.0px / 下端 1880.4px
  重なっているカードの組: 0 / 列の下端の差: 161.6px
幅 360px:
列の数: 1（カードの幅 328.0px）
  1列目（左から 0px）: カード 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 / カードの間 16.0px / 下端 4705.6px
  重なっているカードの組: 0 / 列の下端の差: 0.0px

--- 画像に width と height を書いた場合（画像は 600ms 遅れて届く）---
読み込む前: 届いていた画像 0枚 / カード 1 の高さ 313.2px
読み込んだあと: カード 1 の高さ 313.2px / 読み込みの前後で高さが変わったカード: 0枚 / 位置が変わったカード: 0枚

--- 画像に width と height を書かない場合（画像は 600ms 遅れて届く）---
読み込む前: 届いていた画像 0枚 / カード 1 の高さ 94.8px
列の数: 3（カードの幅 242.7px）
  1列目（左から 0px）: カード 1, 4, 7, 9, 12 / カードの間 16.0px / 下端 515.5px
  2列目（左から 259px）: カード 2, 6, 11 / カードの間 16.0px / 下端 473.1px
  3列目（左から 517px）: カード 3, 5, 8, 10 / カードの間 16.0px / 下端 494.3px
  重なっているカードの組: 0 / 列の下端の差: 42.4px
読み込んだあと: カード 1 の高さ 313.2px / 高さが変わったカード: 12枚 / 位置が変わったカード: 9枚

--- 同じ条件で、カードの高さを最初の1回しか測らない場合 ---
列の数: 3（カードの幅 242.7px）
  1列目（左から 0px）: カード 1, 4, 7, 9, 12 / カードの間 -202.4, -153.9, -105.3, -226.7px / 下端 661.1px
  2列目（左から 259px）: カード 2, 6, 11 / カードの間 -226.7, -141.7px / 下端 642.9px
  3列目（左から 517px）: カード 3, 5, 8, 10 / カードの間 -178.1, -129.6, -202.4px / 下端 688.4px
  重なっているカードの組: 14 / 列の下端の差: 45.5px

CSS.supports('display', 'grid-lanes'): false