如果你想要的只是一个数量上均匀的列分布（不考虑最终的列高度），你可以修改你的循环来实现这一点。如果你想让卡片适合一个最小高度的网格，这就变成了一个"砖石"问题，而且变得更加复杂。
首先确定每个基准面所属的列：

const getCol = (index) => {
  // add 3 to allow division by 3 and get the remainder
  // add 1 to make column number more intuitive in the markup
  return ((index + 3) % 3) + 1;
};

然后在循环中检查：

<div className="row">
    <div className='col'>
        {data.map((datum, i) => (
            <>
                {getCol(i) === 1 &&
                    <Card field={datum.field}/>
                }
            </>
        ))}
    </div>

    <div className='col'>
        {data.map((datum, i) => (
            <>
                {getCol(i) === 2 &&
                    <Card field={datum.field}/>
                }
            </>
        ))}
    </div>

    <div className='col'>
        {data.map((datum, i) => (
            <>
                {getCol(i) === 3 &&
                    <Card field={datum.field}/>
                }
            </>
        ))}
    </div>
</div>

CodeSandbox demo
当然，您可以预先分割数组，并在其各自的列中渲染各个子数组。