Comments on: columns https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 13 Jun 2022 15:33:10 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Vinod Dangudubiyyapu https://css-tricks.com/almanac/properties/c/columns/#comment-1758725 Thu, 02 Jul 2020 13:20:34 +0000 http://css-tricks.com/?page_id=178809#comment-1758725 Hi, I am in need of advice,

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)

]]>
By: Geoff Graham https://css-tricks.com/almanac/properties/c/columns/#comment-1690654 Fri, 12 Apr 2019 15:53:30 +0000 http://css-tricks.com/?page_id=178809#comment-1690654 In reply to Pravin.

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!

]]>
By: Pravin https://css-tricks.com/almanac/properties/c/columns/#comment-1690643 Fri, 12 Apr 2019 15:20:39 +0000 http://css-tricks.com/?page_id=178809#comment-1690643 Super late to the party.. Slightly confused. Flexbox, grid and columns. Are there any comparison articles?

]]>
By: Vinod Dangudubiyyapu https://css-tricks.com/almanac/properties/c/columns/#comment-1614261 Tue, 09 Jan 2018 14:06:17 +0000 http://css-tricks.com/?page_id=178809#comment-1614261 Column alignment issue in chrome https://jsfiddle.net/uydovLbx/ works fine in FF and IE

]]>
By: txdm https://css-tricks.com/almanac/properties/c/columns/#comment-1606644 Thu, 09 Feb 2017 19:03:55 +0000 http://css-tricks.com/?page_id=178809#comment-1606644 In reply to brundonsmith.

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.

]]>
By: brundonsmith https://css-tricks.com/almanac/properties/c/columns/#comment-1605979 Fri, 06 Jan 2017 21:28:09 +0000 http://css-tricks.com/?page_id=178809#comment-1605979 In reply to brundonsmith.

i.e.

.container {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.container > .item {
  min-width: 300px;
}
]]>
By: brundonsmith https://css-tricks.com/almanac/properties/c/columns/#comment-1605978 Fri, 06 Jan 2017 21:25:44 +0000 http://css-tricks.com/?page_id=178809#comment-1605978 I don’t fully understand the need for this property when flexbox exists, other than not having to write quite as much code.

]]>
By: Andre https://css-tricks.com/almanac/properties/c/columns/#comment-1605597 Thu, 15 Dec 2016 17:10:06 +0000 http://css-tricks.com/?page_id=178809#comment-1605597 In reply to jehzlau.

Or you can just use flexbox.

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

Cheeers

]]>
By: Lewis https://css-tricks.com/almanac/properties/c/columns/#comment-1605583 Wed, 14 Dec 2016 21:11:54 +0000 http://css-tricks.com/?page_id=178809#comment-1605583 In reply to Rima.

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

]]>
By: jehzlau https://css-tricks.com/almanac/properties/c/columns/#comment-1605199 Fri, 25 Nov 2016 02:30:43 +0000 http://css-tricks.com/?page_id=178809#comment-1605199 Is it possible to make the column width uneven? For example if I use column count 3, then I want column 1 to have 50% width, then 2 and 3 to have 25% width each. Is this possible with the column property? Or I need to use bootstrap / create my own grid?

]]>
By: Henry https://css-tricks.com/almanac/properties/c/columns/#comment-1604552 Thu, 13 Oct 2016 08:15:37 +0000 http://css-tricks.com/?page_id=178809#comment-1604552 very helpful keep it up

]]>
By: Wojack Pepe https://css-tricks.com/almanac/properties/c/columns/#comment-1604011 Fri, 09 Sep 2016 13:59:24 +0000 http://css-tricks.com/?page_id=178809#comment-1604011 Hi, I too am a cool.

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.

]]>
By: TheFPVdrone.com https://css-tricks.com/almanac/properties/c/columns/#comment-1603684 Wed, 24 Aug 2016 13:12:09 +0000 http://css-tricks.com/?page_id=178809#comment-1603684 Thank you! Worked like a charm

]]>
By: muphet https://css-tricks.com/almanac/properties/c/columns/#comment-1598270 Fri, 27 Nov 2015 11:19:07 +0000 http://css-tricks.com/?page_id=178809#comment-1598270 i wish you could actually vertically align items inside colum, with code like column-margin: auto 0;

]]>
By: Todd https://css-tricks.com/almanac/properties/c/columns/#comment-1597759 Thu, 29 Oct 2015 13:17:32 +0000 http://css-tricks.com/?page_id=178809#comment-1597759 Indeed. Even for IE 10 and 11, I had an antecedent display: table in the css that prevented the multiple columns from dropping to one as the browser scaled down. I ended up adding media queries to reset the column number at specific break points. I certainly did not like having to do that.

]]>