So I tried to create an ul with multiple li-entries. These word entries in the li are supposed to be displayed in columns, however I wanted these columns to be dynamic, meaning that longer words create fewer columns and that shorter words create more columns. The page is supposed to be displayed in DINA4 format. I already attempted to use Flexbox & Grid, however that only works when I define a fixed amount of columns, thus not having it be dynamic.
If possible I would like to avoid using javaScript as the page should be made up of CS and HTML alone. Short words with more columns Longs words with fewer columns
With grid auto-fill I get this results: Result with long words
My code:
ul.words-o {
margin-top: 0;
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0 20px;
}
ul.words-o { margin-top: 0; margin-bottom: 1em; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 20px; }
But I get with auto-fill the same result