ITEMS KEEP ALIGNING HORIZONTALLY INSTEAD OF VERTICALLY…

EXAMPLE
Column 1: Fields 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
Column 2: Fields 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
Column 3: Fields 21, 22, 23, 24, 25, 26, 27, 28, 29, 30

MY INPUTS STILL KEEP ALIGNING HORIZONTALLY

<div className="grid grid-cols-7 gap-4 py-4 px-6 items-start justify-start text-sm rounded-md border p-4 mb-10 shadow-xl">
  {Object.entries(fieldLabels).map(([key, { label, type, options }], index) => {
    const columnIndex = index % 7; // Calculate column index based on modulo 7
    const rowIndex = Math.floor(index / 7) + 1; // Calculate row index

    return (
      <div
        key={key}
        className={`flex flex-col gap-2 col-span-1 row-start-${rowIndex} row-span-1 col-start-${columnIndex + 1}`}
      >
        <label htmlFor={key} className="flex items-center gap-2 mb-1 font-semibold">
          {index + 1}. {label}:
        </label>

        {type === 'select' ? (
          <Select
            value={editedData[key as keyof AllCompanies] || row.getValue(key)}
            onValueChange={(value) => handleChange(key as keyof AllCompanies, value)}
          >
            <SelectTrigger>
              <SelectValue placeholder="Select an option" />
            </SelectTrigger>
            <SelectContent>
              {options?.map(({ value, label }) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        ) : type === 'disabled' ? (
          <Input id={key} value={editedData[key as keyof AllCompanies] || ''} disabled />
        ) : (
          <Input
            id={key}
            value={editedData[key as keyof AllCompanies] || ''}
            onChange={(e) => handleChange(key as keyof AllCompanies, e.target.value)}
          />
        )}
      </div>
    );
  })}
</div>