The second rule doesn’t work because min-content is an intrinsic sizing function. § 7.2.2.1. Syntax of repeat() Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes. § 11. Grid Sizing An intrinsic sizing function (min-content, max-content, auto, fit-content()). A flexible sizing function [is a dimension with the fr unit].
You can use CSS columns and the height will adapt based on the content. ul { column-count: 4; list-style: none; background: #eee; } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> <li>U</li> <li>V</li> <li>W</li> <li>X</li> <li>Y</li> <li>Z</li> </ul>
I tried bugfix with page-break-inside: avoid, but for me it didn’t work fine with only this property and value on Firefox. Then I used the following solution and, in my case, work well for Firefox, Chrome and Edge: #columnasFooter { column-count: 3; } #columnasFooter li { /* for Chrome and Edge */ break-inside: avoid-column; /* … Read more
If for you don’t care about the vertical order, but only the layout: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. You can simply set the li elements this way: li { display: block; width: 25%; float: left; } It should work. If you need to have them in vertical order … Read more
Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height: ul { height: 100px; display: flex; flex-direction: column; flex-wrap: wrap; } <ul> <li>item 1</li> … Read more
The good news is that there is a CSS-only solution. If it was implemented, it would look like this: div.multi { column-count: 3 column-gap: 10px; column-rule: 1px solid black; }
No, there isn’t a way. The feature is designed for content that flows between equal columns.
This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature. From the docs: Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. … Read more
Modern Browsers leverage the css3 columns module to support what you are looking for. http://www.w3schools.com/cssref/css3_pr_columns.asp CSS: ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } http://jsfiddle.net/HP85j/8/ Legacy Browsers Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you … Read more
The correct way to do this is with the break-inside CSS property: .x li { break-inside: avoid-column; } Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn’t make anything work … Read more