I am currently developing an application that presents a variable number of cards to the user in a grid format. The divs defining these cards have both maximum and minimum widths set (375px and 250px, respectively) and are enclosed within a flex container.
.my-card-container {
display: flex;
flex-wrap: wrap;
}
.my-card {
min-width: 250px;
max-width: 375px;
flex: 0 auto;
}
When there is only a single column, the cards expand until reaching 350px width and then stop growing. If the screen width exceeds 500px, the cards shrink to 250px each and two columns are displayed. The same resizing behavior occurs when transitioning from 2 columns to 3, with the columns expanding until the screen reaches 750px wide, at which point they drop down to 250px each forming a third column. However...
Once there are three columns, all the columns will resize to 350px width and leave excess white space on the right side. The cards do not decrease in size to accommodate additional cards. This arrangement remains with 3 columns until there is enough space for a fourth 350px column, repeating the pattern for a potential fifth column.
My objective is to replicate the behavior seen during the first two transitions, which prioritize maximizing the number of cards visible across the screen at any given width. I am struggling to comprehend why the transition from 3 columns to 4 is behaving differently.