假设我有一个数组（已经按Name排序）：

let obj = {
CategoryOne:[
{
   name: "An Item"
   color: "Red"
},
{
   name: "Blue Item"
   color: "Blue"
}
],
CategoryTwo: [
...
]
...
}

我想根据第一个字母将每个类别分成三列。目前，我的解决方案是：

function sort(obj) {
            let sorted: any = {};
            for(let key in obj) {
                const category = obj[key]
                let chunks: any = [];
                const chunkSize = Math.ceil(category .length / 3) + 5;
                for (let i = 0; i < category.length; i += chunkSize) {
                    const chunk = category.slice(i, i + (chunkSize)).reduce((r: any, a: any) => {
                        r[a.name[0].toUpperCase()] = [...r[a.name[0]] || [], a];
                        return r;
                    }, {});;
                    chunks.push(chunk);
                }
                // Set {firstCol, secondCol, thirdCol} to sorted[key]
                sorted[key] = {
                    firstCol: chunks[0],
                    secondCol: chunks[1],
                    thirdCol: chunks[2],
                };
            }

            return sorted;
        });

这是可行的。* 但是，* 我无法找到一种方法，在说明标题的同时，根据首字母平均分配。例如，上面将生成以下内容：

我不确定是否需要根据一列中的字母数量来对字母进行不同的加权，是否可以用CSS解决这个问题，或者是否值得努力使各列均匀分布（最后一列可能是最短的）
任何帮助都是非常感谢的！

编辑（基于回答）

CSS可以处理列的均匀分布，但是，我仍然 * 需要 * 标题是每列（见“S”标题在下面的第2列和第3列）：