I am looking for a solution to keep an (approximately) equal number of items per row when flexbox wraps, for a case with an arbitrary number of children. The closest answers I found were really about specifying a fixed number of children per row at different breakpoints - that is, if six (somehow all the examples are six) children will fit on a line at a certain breakpoint then great, if not then three per line, etc. I know how to change widths per breakpoint, and I know at least four ways to hardcode a flexbox line wrap after a specific arbitrary element - if I know which elment to break on in advance.

This case is different in that I can't know how many children the element will have, however. I know that at a certain breakpoint, I can fit up to five on a row; so if there are five children, then I want a single row, but if there are six children, then I want two rows of three elements. If there are eight, then two rows of four, if ten, then two rows of five, at twelve we get three rows of four, etc. (other numbers need to end up with one fewer on the bottom row - that's all fine.)

I have complete control over the markup, and I'm willing to use javascript if necessary (it probably is). I'm not currently using jQuery and don't particularly want to add a package just for this, but I can if needed and I'm decent at translating jQuery back into vanilla javascript anyway, so go ahead and give me a jQuery solution if that's what you've got. I'm not married to flexbox on principle either, but I'm using align-items: stretch to get the look I want when there's an different number in the last row, so I'm pretty sure grid can't do what I want. If it'll come close, I'll at least learn something. Heck, I'll even look at weird hacky things with floats and max/min width at this point.