Request to add CSS multi column support to [Box]

What problem does this feature solve? Missing support for css columns (css columns on css-tricks)( (columns on MDN).

What does the proposed API look like? columnCount columnFill columnGap columnRuleStyle columnRuleWidth columnRuleColor columnRule columnSpan columnWidth breakInside

Describe alternatives you’ve considered Building columns with Flex or Grid, but CSS multi columns behave slightly different.

[segunadebayo]

Thanks for sharing your approach @trevorblades.

You also achieve this by using the sx prop in v1, which allows you to define regular css styles in a theme-aware, responsive manner.

<Box sx={{ columnCount: [1, 3] }}></Box>

@with-heart, the thing is, we created the sx prop as a fallback for style props we don’t allow by default. Perhaps, we can improve the docs a bit to make this clearer.

Cheers

[bogdansoare]

@with-heart @segunadebayo the downside of using the css prop is that you lose the responsive styles