Grid of options in CSS with flexible width

Question

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?

Answer 1

In my opinion, it is not possible with CSS alone in the grid system. But as you have already done correctly with the Flexbox system.

Why it doesn't work with grid?

You can align the grid system by columns and rows. What you want to do would theoretically only work with row alignment. Definitely not with the column template. Because the column affects the width of the rows below.

Because you wants flexible divbox lengths that adjust to the varying widths of the entire column, it is not possible with the grid system. Now you can say, hey, then I'll do it at row level. Yes, but then you would not be able to make breaks. For this reason, it is right to do what you want to do with the flexbox system.