Masonry
瀑布流布局 · 确定性 round-robin 分列(item[i]→第 i%列·SSR 安全·顺序稳定·非 CSS columns 抖动) + 响应式列数(base/sm/md/lg·首帧 base 防 hydration mismatch·挂载后 matchMedia 调整) + 列内外统一 gap(泛型·token 主题)
#1
#4
#7
#10
#2
#5
#8
#11
#3
#6
#9
#12
全状态
#1
#4
#7
#10
#2
#5
#8
#11
#3
#6
#9
#12
Playground
#1
#4
#7
#10
#2
#5
#8
#11
#3
#6
#9
#12
<Masonry
items={photos}
columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
gap={16}
renderItem={(photo) => <img src={photo.url} alt={photo.alt} />}
/>