Multucolumn (3x8(1x2)) Dashboard design

Hi,
I wanna create a dashboard with 3 rows and in forst row i wanna 10 columns with same view (each of them ll include input and same knowledge.) How can i design it with less code?

    dbc.CardBody([
        dbc.Row([
            dbc.Col([
                html.P('1st of 8'),
                html.Div(dcc.Input(id="inp11", type="text", debounce=True,placeholder="Kime")),
                html.Div(dcc.Input(id="inp12", type="text", debounce=True,placeholder="Miktar"))
            ]),
            dbc.Col([
                html.P('2nd of 8'),
                html.Div(dcc.Input(id="inp21", type="text", debounce=True,placeholder="Kime")),
                html.Div(dcc.Input(id="inp22", type="text", debounce=True,placeholder="Miktar"))
            ]),
             #middle steps
             #middle steps
             #middle steps
             #middle steps
            dbc.Col([
                html.P('8th of 8'),
                html.Div(dcc.Input(id="inp81", type="text", debounce=True,placeholder="Kime")),
                html.Div(dcc.Input(id="inp82", type="text", debounce=True,placeholder="Miktar"))
            ]),
          dbc.Row(),
          dbc.Row()
       ])..................

Im doing it with this format, and i now this is not usefull.

Can you give me any advice about this?

From the pure point of view of code, you can do it with a function:

def make_col(idx):
     base_id = "inp" + str(idx)
     p = idx + ' of 8' # Add logic to do st, nd, rd...
     return dbc.Col([
         html.P(p),
         html.Div(dcc.Input(id=base_id+"1", type="text", debounce=True,placeholder="Kime")),
         html.Div(dcc.Input(id=base_id+"2", type="text", debounce=True,placeholder="Miktar"))
     ])

Then, in the row:

dbc.Row([ make_col(idx+1) for idx in range(8) ])

From the design point of view, maybe flexbox is a better alternative than Bootstrap columns in this case (10 does not play well with the grid).