[css-multicol-1][css-display-3] Introduce a 'display' value for multi-column layout

[SebastianZ]

To have control over the multi-column display defined by the column-* properties in the CSS Multi-column Layout 1, a columns value should be added to the <display-inside> value defined in CSS Display 3.

Making column layout another display type solves the explicitly noted exclusion in other layout specs like CSS Grid Layout 1 or CSS Flexible Box Layout 1 saying

the column-* properties in the Multi-column Layout module have no effect on a * container.

in a nice way.

Furthermore, it would allow to merge the different *-gap properties to an item-gap (suggested in the discussion about adding a flex-items gap property).

Sebastian

[Loirooriol]

I don't understand, what would be the difference between a columns and a flow-root inner display type?

I think the exclusions in Flexbox and Grid should be solved by updating Multi-column and saying that these properties only apply to block containers.

And how would this new inner display type allow to merge the different *-gap properties?

[MatsPalmgren]

@fantasai Is there a technical reason that requires that explicitly noted exclusion in Grid/Flexbox?
Specifying for example "columns: 3; display:grid;" seems like a useful feature to have. It would result in an outer column-wrapper box (or whatever the term is) with three column boxes that have grid layout instead of block layout. The layout would be similar to:

<div style="columns:3">
  <div style="display:grid">
...
  </div>
</div>

except you don't need to introduce the redundant extra element.

[tabatkins]

@SebastianZ While this would have been the correct thing to do originally, the multicol properties have existed for a long time and have relatively high usage, so there's no way to change them now. As such, adding a display:columns value would have zero effect; we'd still have to support the use of the multicol properties on blocks.

I think the exclusions in Flexbox and Grid should be solved by updating Multi-column and saying that these properties only apply to block containers.

Yes, this is a better solution than excluding them explicitly from other display types.

@MatsPalmgren Given that Grid doesn't have a decent fragmentation story in the first place, speccing that they have to work together like that doesn't seem the best. ^_^ But also it wouldn't be consistent with other things - you can't do that with display:table, for instance. Also, in general we want to promote using the extra element; it's not redundant, as people can reasonably want to control the same properties differently for the grid and the multicol, such as margin and padding. Adding more anonymous boxes doesn't help.

[MatsPalmgren]

Given that Grid doesn't have a decent fragmentation story in the first place,

I wasn't aware of that, can you elaborate? Grid fragmentation works pretty well in Firefox, if I may say so. ;-)

as people can reasonably want to control the same properties differently for the grid and the multicol, such as margin and padding.

Sure, they can add a child element if they want that.

Adding more anonymous boxes doesn't help.

I'm not suggesting adding any new anonymous boxes. I'm just saying that we can style the (anonymous) column boxes that we already have to use Grid layout instead of Block layout. (I don't see any reason why Flexbox/Table layout wouldn't work too - both support fragmentation as far as I know.)

[SebastianZ]

I don't understand, what would be the difference between a columns and a flow-root inner display type?

Right, flow-root seems to cover this use case already. I simply missed that.

I think the exclusions in Flexbox and Grid should be solved by updating Multi-column and saying that these properties only apply to block containers.

+1 on that. Created issue #1364 to discuss that.

And how would this new inner display type allow to merge the different *-gap properties?

It allows to define an item-gap property (or however it's called in the end) as a property replacing the other *-gap properties (make them aliases of it), that strictly relates to the chosen display value.

@SebastianZ While this would have been the correct thing to do originally, the multicol properties have existed for a long time and have relatively high usage, so there's no way to change them now. As such, adding a display:columns value would have zero effect; we'd still have to support the use of the multicol properties on blocks.

The idea is to make grid-gap, flex-gap, and column-gap aliases of item-gap and deprecate them at the same time (and maybe remove them in the future when their usage dropped enough).

As my use case seems to be covered by flow-root, I close this issue.

Sebastian