css-multicolumn-layout

Let's say I have a div which will contain a set of elements (divs), which may have different heights, but all of them will have the same width. I've achieved this currently with isotope + masonry, but since some browsers already support CSS3 multi-columns, I was hoping to have a only-CSS solution for these browsers, falling back to Javascript for the rest. This is the CSS I've been trying: .div-of-boxes { -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; } However, this makes the flow of the elements to be top

I would like to use CSS to present a two-column layout. The markup I am using is this <div style="-webkit-column-count: 2; -webkit-column-rule: 1px solid black; -webkit-column-width: 80px; margin-left:20px;margin-top:20px;"> <div id="picturebox" style="">picture box</div> <div id="nme">name</div> </div> Is there a way to give one column a width of 20px and one column a width of, say, 80px? No, there isn't a way. The feature is designed for content that flows between equal columns. Oriol Technically it's not possible to do it with the multi-column property only but for a 2-column layout you can

Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It seems to me that all of the columns are equal height. 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. Cards are ordered from top to bottom and left to right. Heads up! Your mileage with

With the following HTML, what is the easiest method to display the list as two columns? <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> Desired display: A B C D E The solution needs to be able work on Internet Explorer. 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