#1073: Column wrapping for multicol

Visit on Github.

Opened Mar 26, 2025

こんにちは TAG-さん! Mazda Toyota!

I'm requesting a TAG review of Column wrapping for multicol.

The column-wrap property is intended to enable column wrapping (there's already some support for implicit column wrapping in nested multicol, when breaking in the outer fragmentation context, but that's all). If the value of column-wrap is wrap, and all the specified columns have been filled in the inline direction, instead of overflowing in the inline direction, a new row for columns will be created, so that more content can be added below the previous row of columns. The block-size of the rows can be set via the column-height property. If it is auto, the block-size of the content box will be used instead. Treating auto like this is useful for scrollable overflow, so that there's room for one row of columns in the scrollport.

Further details:

Discussions

Log in to see TAG-private discussions.

Discussed Apr 1, 2025 (See Github)

Xiaocheng: Had a look at it … is an extension to the CSS multicolumn layout … propose an extension feature, when the columns overflow they should wrap to the next row … introduced column wrapping … left a comment in brainstorming … think this is a natural extension, seems useful … but the reading direction may not be intuitive … may be hard if this should be read from left to right or top to bottom … not sure if I'm asking to much … but adding page or column numbers could be interesing … will ask them … want to ask what developers currently do to achieve the same thing … alternatives considered, privacy & security considerations Matthew: Think this comment is great! Hadley: If you both agree, then I would suggest to ask them if they would update the explainer … otherwise they reply to us in the issue … which would be hard to find in the future … great idea to ask them Matthew: Expect this will go to pending: external-feedback? Hadley: I think so! Xiaocheng: I will post it.

Comment by @xiaochengh Apr 17, 2025 (See Github)

Hi @mstensho, the TAG discussed it at a Breakout and are generally positive about it, and would like to further see:

  1. With column wrapping, user may be confused about the reading direction: should it be LTR then HTB, or should it be HTB then LTR? Are there any considerations or mitigations?
  2. Regarding the explainer, could you adding the following:
    • What do web developers currently do to achieve such layout?
    • What are the alternatives considered?
    • Are there any privacy, security and accessibility considerations?

We would also prefer the explainer to be placed in the same repository next to the spec than a personal repo.

Comment by @mstensho Apr 22, 2025 (See Github)
  1. Row gaps (and rules) may be helpful. @rachelandrew Any thoughts?
  2. Added

PR for placing it in css-multicol-2: https://github.com/w3c/csswg-drafts/pull/12107

Comment by @rachelandrew Apr 22, 2025 (See Github)

I'm not completely sure what the question is, but rules are defined in the new spec here https://www.w3.org/TR/css-gaps-1/ (we should probably move the column-rule info to point to this) and row gaps should be defined in the CSS alignment spec (which is where column gaps are defined).

Looks like the PR is failing on ipr.

Comment by @mstensho Apr 22, 2025 (See Github)

I think the concern is that the user may be uncertain how to read 2D column layout. Should it (in horizontal-tb, ltr) be from left to right, then from top to bottom - or the other way around? I.e. columns first, or rows first?

Comment by @rachelandrew Apr 22, 2025 (See Github)

Yes from left to right, then top to bottom. I think any confusion would be from a design problem, as you say, a row rule would help there if you could see more than one row at once. I think the most likely way people want to use this however is to prevent the major usability issue of multicol on the web currently, which is that you might have to scroll up and down to read the contents of each column. This enables carousel-like experiences that scroll in the block direction (either full page, or in some kind of container) in which case the user would not see more than one row of columns at any one time.

Comment by @svgeesus Apr 22, 2025 (See Github)

We would also prefer the explainer to be placed in the same repository next to the spec than a personal repo.

Here it is: https://github.com/w3c/csswg-drafts/blob/main/css-multicol-2/column-wrap-explainer/explainer.md