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].
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
The multi-column specification offers no property to change the distribution of elements among the columns: http://www.w3.org/TR/css3-multicol/. Such a property seems to go against what the module was designed for (recreating how newspaper or magazine articles are laid out). None of the other pure CSS solutions will allow you to achieve the effect you are looking … 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
The closest thing would be to use flexbox #blogPosts { display: flex; align-items: left; justify-content: left; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; align-content: flex-end; } http://jsfiddle.net/o59gc4hw/2/
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
You need each item in the column to be displayed as “inline-block”. That will solve your problem without needing to use jQuery. Additionally, each element can be specified to have width: 100% in order to get the them to use the full width of the rows. Here is a working example: $(document).ready(function() { for( var … Read more
Use CSS3’s multi-column layout: .container { column-count: 2; column-gap: 20px; } Browser Support (unprefixed): Chrome 50 Firefox 52 Safari 9 Edge 12 Opera 11.5 IE 10
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