如何在React中实现对象的纵向列方式渲染？

问题背景 #

我有如下格式的对象列表：

const objects = [{name: 'some name', count: 'how many of that name'}, ...]

使用以下代码渲染：

{objects.map((item) => (
    <Grid item key={item.name} xs={2} style={styles.count}>
        <Typography
            key={item.name}
            align="right"
            component="h1">
            {`${item.name}: ${item.count}`}
        </Typography>
    </Grid>
))}

当前渲染效果为横向填充后换行：

name 1: 4 name 2: 4 name 3: 4
name 4: 4 name 4: 4

需要改为纵向列优先的排列，即先填满第一列，再依次填充后续列，目标效果：

name 1: 4 name 3: 4 name 5: 4
name 2: 4 name 4: 4

解决方案 #

Material-UI Grid默认是行优先流式布局，要实现列优先排列，推荐两种方案：

方案1：CSS多列布局（最简实现） #

直接给Grid容器添加CSS多列属性，无需修改item的渲染逻辑：

<Grid container style={{ columnCount: 3, columnGap: '24px' }}>
    {objects.map((item) => (
        <div 
            key={item.name} 
            style={{ 
                breakInside: 'avoid', // 避免单个元素被拆分到两列
                marginBottom: '12px'  // 控制元素垂直间距
            }}
        >
            <Typography align="right" component="h1">
                {`${item.name}: ${item.count}`}
            </Typography>
        </div>
    ))}
</Grid>

• columnCount: 3：指定要划分的列数
• columnGap：控制列之间的水平间距
• breakInside: 'avoid'：保证每个元素完整显示在同一列

方案2：手动分组后用Grid行渲染 #

如果需要更精确的布局控制，可以先将原数组按列数分组，再逐行渲染每组元素：

// 按列数分组的工具函数
const groupForColumnLayout = (items, columnNum) => {
    const groups = [];
    const itemsPerColumn = Math.ceil(items.length / columnNum);
    // 按行遍历，每行取各列对应位置的元素
    for (let rowIndex = 0; rowIndex < itemsPerColumn; rowIndex++) {
        const rowItems = [];
        for (let colIndex = 0; colIndex < columnNum; colIndex++) {
            const itemIndex = rowIndex + colIndex * itemsPerColumn;
            if (itemIndex < items.length) {
                rowItems.push(items[itemIndex]);
            }
        }
        groups.push(rowItems);
    }
    return groups;
};

// 生成分组后的数据（示例分成3列）
const groupedObjects = groupForColumnLayout(objects, 3);

然后渲染分组后的内容：

<Grid container spacing={3}>
    {groupedObjects.map((row, rowIdx) => (
        <Grid item xs={12} key={rowIdx}>
            <Grid container justifyContent="space-between">
                {row.map((item) => (
                    <Grid item xs={4} key={item.name}>
                        <Typography align="right" component="h1">
                            {`${item.name}: ${item.count}`}
                        </Typography>
                    </Grid>
                ))}
            </Grid>
        </Grid>
    ))}
</Grid>

这种方案适合需要自定义每行元素对齐方式、响应式调整列数的场景。

内容的提问来源于stack exchange，提问作者Andree