So I'm looking for the holy grail in row>column fluid layouts ...
Let's say i have a div with a set width (the "row"). The div has display:flex; and flex-wrap:wrap; justify-content:center; to layout it's variable number and sizes of children. I also want justify-content:flex-start etc. as an add-in option.
The children (boxes) have percentage widths like 50%, 33% ... As long as these fit into the row, they are lined up (50+50, 25+50+25, ...). If there is more width in sum than available, chidren wrap to the next line (33+33+50 --> this wraps into two lines, with the rest of the available space distributed left and right of each wrap line).
That's the behaviour i want and it works fine as long as there are no gaps added.
Everything is set to box-sizing:border-box;
Now those children (aka boxes) should get a spacing around them and a background color (= visually the become boxes with gaps between them). The gaps may(!) be equal across all elements, but i want to be able to apply more space around some boxes sometimes for special layouts.
- Paddings inside the box and use sub-childen with background-color are apain to handle inside the boxes and when combining these withnon-background-color boxes that should line up. I want to avoid thatsolution, always felt like solving an outside problem inside a component, and the last years using that solution always meant to hack around that paddings somehow.
- Margins around the boxes add to the final width of each box, so a line of 50+50 becomes wider than 100% and wraps. I can compensate the width of each element by it's margin with css variables. That's my current go-to-solution, but is this really it? It feels more like overcomplicating things, especially when i want to add more margin to some box on one side etc. – i can make it work, but it's a css variable mess fest I'm afraid of coming back to me with unthought-of problems somewhen in future ...
- use the gap attribute and also compensate the width of each element for that gap width means that I'm compensating the last element in a line too (treat all equally) and means that final width of a 50+50 line will be one gap less than 100%, which is not a big problem with justify-content:center but becomes one with justify-content:flex-start as this results in unequal distance to the surroundings. My intuition says using gap would be the right solution and i want to improve from where i'm with it now ...
Things i have ruled out to work (i think) are:
- Flex grow shrink basis is not viable option (i think?). They always fill out the whole row if space is left after wrapping (33+33 actually then becomes 50+50).
- Stretching the content with justify-content:stretch; to even out that last additional gap space does not work if i also have lines like 33+33 that don't add up to almost 100%. If i do that, they grow again to a size equal to 50+50.
- Solutions that work with "n-1" calculations can't be applied as i don't know how many children n will be there in sum, and especially not how many will there be in a wrapped row.
- Equally to that, using display:grid and fr-units instead is not applicable if i want to control the width of boxes on the boxes level, not the parent level for all children alike.
- Javascript for such a fundamental layout system is not an option, i don't want that to break things, adding local formattings that could interfere with further functionality, ...
I've been looking for solutions all over the place, even peeking into different versions of bootstrap to see what they do ... coming back to the very same problem again and again whenever "the solution" is required again.Almost all proposals are based on knowning the number of children in a row, and i can't do that due to wrap and adjusting box width percentages based on screen size etc and not knowing how many will be there. the other solutions work with one justify-content setting or when all boxes are equal width or have equal gaps all over ... not flexible enought for my intentions here ...
So ... impossible right now with css, or is there any "right" solution for this?