I was today years old when I discovered the CSS property column-count.

Do you have any fucking idea how many times I’ve used CSS grid or flex box or BOTH when all I wanted was to make a layout with a set number of columns?

Why the fuck didn’t I know about this thing?

Did you know about this thing?

The hell kinda black magic is this property?

@N00bPancakes RIGHT? It’s even pretty well-supported! 0.0

Holy shit, this is pretty cool. There's even a column-span property to make something span across multiple columns.

There is always some weird ass CSS property that solved any problem you might have had that shows up late. No one really knows CSS to its full extent

It’s a hidden gem
column-count
column-gap
column-width

Here’s a pro tip too:
I used to avoid columns because child-elements can be chopped up into 2 cols in an ugly way

But all you gotta do to avoid that is to add this to the child-element:

break-inside: avoid-column;

Pros and Cons
+ great for ”masonry layouts”
- no good if you need items of various heights to align into rows
- you cannot control which column empty space ends up in (as you sort of can with flex) as far as i know.
+ there is a column-gap property
- there is no row-gap property (the concept of rows doesn’t even exist here)
- by default child items can wrap over multiple columns (without the tip I showed in my last post, or if they are inline-block)

@jiraTicket CSS is a cruel mistress with how many situations there are for "you can control gaps... well the col gap... not row gaps..."

Does everything have to be one step forward, one step back!?!?!!?

This is gonna be great next time I need to work on front end. I'm totally going to forget everything said in this thread.

Good old <table> comes back to life in a different form

Hasn't this been around since the beginning of CSS 3? It's my go to "quick columns" setting for chunks of text. (Beyond that I don't tend to faff too much though, tend to use flexbox for more control.)

@AlmondSauce Yeah! That’s part of the reason I’m pissed I didn’t know it.

@N00bPancakes but a row gap property doesn't even make sense here... The elements just sorta "flow" through the columns. If you need a row gap property you're probably using this wrong and should instead use a grid.

I have always used flex for pretty much everything, even though I was aware of the grid and the column properties. I should start using those!!

@inhamul The biggest downside I used to see with Flex for column layouts is that you can’t just style the parent to decide the gaps between child-items.

So much nicer to just have child-items remain unchanged and only style the parent to decide how they should be placed. As you can with grid.

But now with the property row-gap gaining support it is possible. (Still no safarisupport though, according to mdn)

Tables... this is tables.

We’ve come full circle.

What the actual fuck. Why couldn't those dumb cunts spewing medium articles write about this shit instead of that 998th article on react.

@hashedram Probably some variation on “this is easy, everyone else probably knows about it, no one cares”