'Dash columns doesn't match grid system

in the Dash layout docs, it is said that:

"An integer 1,...,12. Column will span this many of the 12 grid columns. For a half width column, set width=6, for a third width column, set width=4, and so on."

therefore, When I defined 3 columns in a single row, each with width=4, I expected each to catch a third of the screen:

navbar = dbc.Navbar(
            dbc.Row([dbc.Col(html.H1('Column 1',style={'backgroundColor':'blue'}), width=4),
                    dbc.Col(html.H1('Column 2',style={'backgroundColor':'green'}), width=4),
                    dbc.Col(html.H1('Column 3',style={'backgroundColor':'yellow'}), width=4)])
        ,color="#ff4d4d")

but the result is very different:

as you can see, the three cols clamp in the beginning of the screen, not willing to stretch the whole way. what's going on?

Solution 1:^[1]

You can add 'display':'block' instead of using flex:

 dbc.Navbar(
            dbc.Row([dbc.Col(html.H1('Column 1',style={'backgroundColor':'blue'}), width=4),
                    dbc.Col(html.H1('Column 2',style={'backgroundColor':'green'}), width=4),
                    dbc.Col(html.H1('Column 3',style={'backgroundColor':'yellow'}), width=4)])
        ,color="#ff4d4d", style={'display':'block'})])

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Phoenix

'Dash columns doesn't match grid system

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]