CSS Columns is giving tough time for Chrome and Safari browsers. following are the issue.
1. Columns having a iframe of embed videos are disappearing (reported to chrome team) https://www.codeply.com/p/vVorXVNYX6
2. Spanned column above getting another column of below spanned column height(https://ibb.co/kq1fWfQ)

Hey Pravin! Really good question. I can’t think of any articles off the top of my head, but hopefully I can help explain a bit and point to some other explanations.

CSS columns are a visual way to flow content from one column to the next, determined by the number of columns defined by the columns property. So, if you were to put 3 columns on an element, then it’s children elements would be distributed into those columns.

Flexbox can create columns, but it’s more about making flexible boxes that run either vertical or horizontal and fill the available space based on the Flexbox properties. So, yeah, can look like columns (or rows), but it’s really how Flexbox is calculating the size of each flexible box to fill space.

Grid creates true columns and rows by establishing track lines and placing elements within them. Chris recently posted a nice comparison between Grid and Flexbox… and the differences, though somewhat nuanced, become much more clear once you dig into them.

There’s a lot more to than this, as you might imagine, but hopefully this helps at least scratch the surface and gets you pointed in the right direction. Might even be worth a post!

Brundon, from what I’ve seen, that will only work if you define a specific height limit for the container. Then the columns will appear (if needed) but they will not reflow properly when the page is made smaller…the outer container will remain its minimum width, even if it goes offscreen.

CSS columns will always split it into the defined number of columns and will let the height be dictated by the content. It will reflow both width and height appropriately.

i.e.

.container {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.container > .item {
  min-width: 300px;
}

Or you can just use flexbox.

.parent {
display:flex;
}
.first-column {
flex-grow: 2;
}

Cheeers

Late to the party I know but the new Codepen Spark page is using it in its grid, with great results!

Good code, I know all the things about the CSS rules for this area now. Columns flowing in all directions thank you to my knew found knowledge.

If blood must be spilled, I would greatfilly act on your behalf, friend.