How to move a product card to a new line and scale all cards to fill the freed space?

Question

css

Hello!
How to fill the remaining space on the right after transferring the card, while ensuring that all cards are the same size? I am interested in the solution exclusively with flexbox, since I know how to use viewports)


This method is not suitable, since the last 2 cards are clearly larger

.cards {
  display: flex;
  flex-wrap: wrap;
}
.cards__item {
    margin: 10px;
    flex: 1 1;
    min-width: 250px;
}

Answer 1

Greetings.
I can suggest an implementation within the Grid.
Function auto-fill, propertiesgrid-template-columns

Answer 2