How to wrap items to always have at least 2 items on the last row?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to wrap items to always have at least 2 items on the last row?

P粉023650014 2023-09-11 16:49:22

519

Picture problem

My client of course wants to list vehicles on his website in a responsive manner. But all known techniques (flex, grid) wrap the last item to the next row.

What I try to do with pictures

But for a hero, this is extremely ugly. Customer wants:

Maximum 5 items per line
At least 2 items per line

The tricky part is that the number of items must bedynamic. Usually between 4 and 6 cars

I know I can choose the last two items like this

.item:nth-last-child(-n+2) { order: 2; /* set order to 2 for the last two items */ }

But I can't force them to wrap. Any ideas?

P粉023650014

reply all (1)

P粉1470452742023-09-12 13:00:43 1 floor

It turns out that I have to get the number of items in advance and inject the class into the list to control the display

...

.SENARIO_4_ITEMS { .container { width: 268px; } @media #{$larger-down} { a { flex-basis: 50%; display: flex; justify-content: center; .container { width: 268px; } } } } .SENARIO_5_ITEMS { .container { width: 270px; } @media #{$xxlarge-down} { a { flex-basis: 33%; display: flex; justify-content: center; .container { width: 300px; } } } } .SENARIO_6_ITEMS { a { flex-basis: 33%; display: flex; justify-content: center; .container { width: 300px; } } @media #{$xxlarge-down} { .container { width: 300px; } } }