React 列表虚拟化如何实现使用 CSS Grid 布局的同时支持拖动元素？

[TrackBack]

开源的几乎所有虚拟化库都是要么支持单列列表，要么支持显式指定列数的网格（类似表格）， 都没法处理 css grid 这种本质上是一维表格但是一行有多个元素的情况 魔改一番用上了，要么高度计算总是出问题，要么和拖拽不兼容

这个场景应该是很常见的需求吧？什么文件浏览不是应该都会用到？ 开发者工具看了下几家大厂的页面，居然都是 media query 按宽度直接设置 grid 布局列数。。。

各位大佬有优雅一点的原生支持 css grid 的方案吗

[shunia]

问 AI：

2. TanStack Virtual
A headless virtualization utility that is highly flexible because it does not provide its own UI components. It allows you to build custom grid layouts, including responsive grids with aspect ratios.

Grid Support: Excellent for complex or "sticky" table grids where you need full control over the DOM structure.
Framework Agnostic: While used heavily in React, it can also work with other frameworks if needed.

[Chuckle]

看看这个表格？用的就是 css-grid https://comcast.github.io/react-data-grid