Fitting 7 dbc.Cards in one row

[vnavdulov]

I have 7 cards that get generated with a function and get populated in a row. I need the first card to be wider and have them all be the same height while being fluid. I have the “fluidity” set and that part works but since I only have a width of 12 to work with, the math just doesn’t work. If I set the 1st card to width 6, it’s too wide.

If I set the 1st card width to 3 and the rest to 1, the proportion looks good but the row doesn’t take up the screen width.

The cards are nice to keep everything neat and together but should I think of a solution without using them in this case?

Also if anyone could suggest the height alignment within that row for all the cards to be the same height, I would appreciate it.

Thank you!

[raptorbrad]

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

[vnavdulov]

Thank you!