为行数最多为3列的materialUI生成随机网格的算法

import React from 'react';
import { Grid } from '@material-ui/core';

function generateRandomGrid() {
  const rows = Math.ceil(Math.random() * 3); // 随机生成行数，最多为3
  const cols = Math.ceil(Math.random() * 3); // 随机生成列数，最多为3
  const totalCells = rows * cols; // 计算总格子数

  const gridContent = Array.from({ length: totalCells }, () => Math.ceil(Math.random() * 10)); // 生成格子内容数组

  const grid = [];
  for (let i = 0; i < rows; i++) {
    const row = [];
    for (let j = 0; j < cols; j++) {
      const index = i * cols + j;
      row.push(gridContent[index]);
    }
    grid.push(row);
  }

  return grid;
}

function RandomGrid() {
  const grid = generateRandomGrid();

  return (
    <Grid container spacing={2}>
      {grid.map((row, rowIndex) => (
        <Grid key={rowIndex} container item xs={12} spacing={2}>
          {row.map((cell, cellIndex) => (
            <Grid key={cellIndex} item xs={12 / grid[rowIndex].length}>
              {cell}
            </Grid>
          ))}
        </Grid>
      ))}
    </Grid>
  );
}

export default RandomGrid;