Fitting 7 dbc.Cards in one row

You’ll want to accomplish this using CSS.

Decide on the proportions you want. For instance, the large could be 28% while all the small ones could be 12% width each.
28 + 12*6 = 100.

In your styles.css in the assets folder, simply add

.big-card {
    width: 28%
}

.small-card {
    width: 12%
}

On each card, just add the appropriate classname.

big_card = dbc.Card(children, class_name='big-card')
small_card = dbc.Card(children, class_name='small-card')
1 Like