There is a list of items, and each item has some room for shrinking it till min content. On some screen sizes the list can be shown in two columns because there is enough space for this.
Which technique can help with this?
Requirements:
- Items should not be shrunk less than their content.
- New column should be added if shrinking all items within constraint #1 make columns narrow enough to fit into container.
- Items should stretch within column width.
- Columns should occupy the full width of the container.
- Preferably, the items should fill the container in the order: top to bottom, left to right.
- At least is should work in the latest browsers.
I tried setting the CSS columns property, but could not achieve the desired behavior. Setting columns to something like 5rem is a guesswork based on the nature of the data, but sometimes this value is not enough to have the whole item fit (see example below).
An example (here is a space for two columns of items):
This is a desired layout for wider container (achieved via columns):
But this overflow happens with columns: 5rem:
Maybe CSS Grid could help solving this issue, but my attempts did not produce any workable solution.