Is there a way to specify different widths for columns in CSS3?
No, there isn’t a way. The feature is designed for content that flows between equal columns.
css-multicolumn-layout
How to make text over flow into two columns automatically
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; }
Bootstrap 4 masonry layout utilizing flexbox grid
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
How to display an unordered list in two columns?
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
How to prevent column break within an element?
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