Generate a dynamic antd grid for a dynamic antd form

Question

I have created this dynamic form using antd:

    return (
        <Form
            name="Multi-table Insert"
            layout="vertical"
            onFinish={handleSubmit}
        >
            {fieldData.fields.map((field) => (
                <Form.Item
                    label={field.name}
                    name={field.name}
                    rules={[{ required: true }]}
                >
                    {generateFieldItem(field)}
                </Form.Item>
            ))}

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

Where fieldsData.fields is basically a list of fields and their information, and generateFieldItem creates a form input based on the field information.

Currently the form is displayed as a single input per line, meaning that forms with many inputs end up taking up a lot vertical space, but not much horizontal space. How can I create an antd grid that contains an input in every cell? The grid should be a square with a length equal to the ceiling of the square root of the number of inputs, meaning 20 inputs would have a 5x5 grid with an empty final row, and the cells should be populated row by row from left to right.

I'm still a bit new to javascript/typescript so this one's a bit tricky for me.