[Feature Request]: Utilities for "CSS columns" (not grid) property

[zackhall]

Hello –

First of all, thank you so much for building and sharing tailwind with the community. Can't tell you how much I appreciate it. I love that it's a long-term bet on CSS and agnostic to any framework I'm using.

Request

Add classnames for the columns CSS property and common column sizes.

MDN link: https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Aside from creating columns of text, can be super helpful for image galleries with a Masonry layout. E.g. https://codepen.io/zthall/pen/jObxyLX

Propose maybe using classnames following a similar pattern to the Grid Template Columns classes.

.content-cols-1
.content-cols-2
.content-cols-3
...

Drawbacks

Concerns might be:

• Confusing this class with the class for grid columns. Tried to mitigate this by adding using .content- prefix; but not perfect.
• Increasing package size if this isn't used often enough.

Conclusion

Curious to hear the team's thoughts. If this seems like something the team would be interested in, I'd be open to trying my hand at a pull request.

[RoccoHoward]

Definitely want/need this. I just rolled it in custom addition today. I tried the grid approach, but the outcome wasn't nice for content that needs to flow together.

Just need some break avoidance to stop content being split between the columns:-

eg

.avoid-cols-break {
  break-inside: avoid-column;
}

[hotwheel16]

Need this for an upcoming project as well. Column gaps and breaks also desired.

[paul-adams-985]

Yes please. something to create simple masonry layouts would be greatly appreciated - as if you haven't done enough already :)

[marclucraft]

+1 for this. Creating simple Masonry with CSS Columns would be great. Is there any progress on this?

[Williamssonn]

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.Specify the style of the rule between columns: column-rule-style: dotted;
Divide the text in a

element into three columns: column-count: 3;
Specify a 40 pixels gap between the columns: column-gap: 40px;
Specify the width, style, and color of the rule between columns: column-rule: 4px double #ff00ff;

myaccountaccess

[marclucraft]

Thanks – but this is a discussion on whether or not its doable with TailwindCSS

[Edgardon]

CSS grid-column-gap property, In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. This time I have​ Definition and Usage The grid-column-gap property defines the size of the gap between the columns in a grid layout.