如何基于Ant Design Grid为动态表单实现正方形网格布局？

要解决大量表单字段纵向占用空间的问题，我们可以通过计算网格边长，结合CSS Grid或Ant Design栅格系统来实现正方形网格布局，具体方案如下：

核心思路 #

1. 计算网格边长：取字段数量平方根的向上取整值，比如20个字段对应5（Math.ceil(Math.sqrt(20)) = 5），形成5x5的正方形网格。
2. 布局容器：用网格容器均分横向空间，每个单元格放置一个表单字段，最后补充空白单元格保证网格形状为正方形。

方案一：CSS Grid实现（推荐） #

CSS Grid能更精准地实现正方形网格布局，无需依赖Ant Design栅格的整数限制，代码更简洁：

return (
  <Form
    name="Multi-table Insert"
    layout="vertical"
    onFinish={handleSubmit}
  >
    {/* 计算网格参数 */}
    const fieldCount = fieldData.fields.length;
    const gridSize = Math.ceil(Math.sqrt(fieldCount));

    {/* 自定义网格容器 */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
      gap: '16px', // 控制单元格间的水平/垂直间距
      marginBottom: '24px'
    }}>
      {/* 渲染表单字段 */}
      {fieldData.fields.map((field, index) => (
        <Form.Item
          label={field.name}
          name={field.name}
          rules={[{ required: true }]}
          key={index}
        >
          {generateFieldItem(field)}
        </Form.Item>
      ))}
      {/* 填充空白单元格，保证网格为正方形 */}
      {Array.from({ length: gridSize * gridSize - fieldCount }).map((_, index) => (
        <div key={`empty-${index}`} />
      ))}
    </div>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Insert
      </Button>
    </Form.Item>
  </Form>
);

方案二：Ant Design栅格系统实现 #

如果需要沿用Ant Design的栅格体系，可按以下方式修改：

return (
  <Form
    name="Multi-table Insert"
    layout="vertical"
    onFinish={handleSubmit}
  >
    {/* 计算网格参数 */}
    const fieldCount = fieldData.fields.length;
    const gridSize = Math.ceil(Math.sqrt(fieldCount));
    const colSpan = Math.floor(24 / gridSize); // 栅格总宽度为24，均分后取整

    <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
      {/* 渲染表单字段 */}
      {fieldData.fields.map((field, index) => (
        <Col span={colSpan} key={index}>
          <Form.Item
            label={field.name}
            name={field.name}
            rules={[{ required: true }]}
          >
            {generateFieldItem(field)}
          </Form.Item>
        </Col>
      ))}
      {/* 填充空白单元格 */}
      {Array.from({ length: gridSize * gridSize - fieldCount }).map((_, index) => (
        <Col span={colSpan} key={`empty-${index}`} />
      ))}
    </Row>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Insert
      </Button>
    </Form.Item>
  </Form>
);

关键细节说明 #

• 网格边长计算：Math.ceil(Math.sqrt(fieldCount))确保网格是能容纳所有字段的最小正方形。
• 空白单元格填充：通过gridSize * gridSize - fieldCount计算需要补充的空白单元格数量，保证网格整体为正方形。
• 间距控制：CSS Grid的gap或Ant Design Row的gutter参数可调整单元格之间的间距，提升布局美观度。

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