Scenario:
Using flexbox, I'm creating a template where the number of 'cards' displayed can change from page to page. If a user adds 2, 3 or 4 cards – the layout is great.
However, if a user adds 5 cards, the layout is now less aesthetically pleasing with the 5th card alone on a new row.
Is there a way I can display up to 4 cards on a row, but if there are 5+ cards.. then the first row would display 3 cards, and the second row would display 2?
Here's a general idea of how the code would be displayed.
<style>
.cards-wrapper {
display: flex;
flex-wrap: wrap;
}
.cards-wrapper .card {
flex: 1 1 20%;
margin: 10px;
}
</style>
<div class="cards-wrapper">
<div class="card"> </div>
<div class="card"> </div>
<div class="card"> </div>
<div class="card"> </div>
<div class="card"> </div>
</div>
You can combine nth-child & nth-last-child pseudo classes.
.cards-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cards-wrapper .card {
flex: 1 1 calc(25% - 10px);
}
.card:nth-child(1):nth-last-child(5),
.card:nth-child(2):nth-last-child(4),
.card:nth-child(3):nth-last-child(3) {
flex-basis: calc(33.333% - 10px);
}
The trick works for 5 elements (9th would stay alone in the last row) However, this is not elegant solution. In this case I'd recommend to use CSS grid instead of flexbox.
This is what I would do. You can create two classes based on the number of items. Count the number of elements ( if you are using a backend language or also with javascript ). Making the layout automatically based on the items is usually done with the backend languages or javascript.
one with this (remove the margins)
flex: 0 1 33.3333%;
and one class with
flex: 0 1 25%;
You could also give them inline width based on the number of items.
You can accomplish this with Bootstrap if you are able to use this. https://getbootstrap.com/docs/4.1/layout/grid/#all-breakpoints
Bootstrap comes with the breakpoints already defined so you give it the specific class you need based off the sizing of the screen col-lg-3 (on a large screen the column will span 3)