So, I can't seem to find a good way to do this, and Google hasn't helped much. Basically, I have a UL with LI's, these LI all contain checkboxes with labels, each label can be of any length, and I want to present this in a table-like manner but flowing, so when the container width changes, the "grid" or table of items are reflowed to maintain the grid-like appearance. Here is an image that I hope explains:
See how the space for the "Small" in the first part is larger since the "Long option" won't fit, and then it does fit, the space for "Option" grows to the same size as the "Even longer option" to accommodate the new table/grid. And when all fit they all get their minimum size
So, just using flex these wouldn't line up. I am unsure whether "display: grid" could do this. Any ideas?