# 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.

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).