Re: [csswg-drafts] [css-multicol] Overflow in the block direction for continuous media (#2923)

I (strongly) agree with the goal of this, but I have different proposal / syntax for getting here.

One thing I am not a fan of in the proposal in https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2566448417 is how it handles `(max-)height` / `block-size`: say you set the height of your multicol to be 10em. Depending on how many rows you get, the actual height might be 20em, or 30em (+ the gap size), and that's weird. What we are constraining is not the `height` / `block-size` of the multicol, it's the `height` / `block-size` of the rows, so using the `height` / `block-size` property seems off to me: that should care about the multicol as a whole, and a separate property should care about the height of the rows.  Based on that notion, here's an outline my alternative proposal:

----

The multi-col container contains at one or more column-row box, which in turn, contain column lines (themselves containing column boxes), as described in multi-col 1.

If there is more than 1 column row box, they stack up in the block axis, separated by a gutter whose size is determined by 'row-gap'.

If 'column-rule' is set, a rule is drawn in the row gaps as well as in the column gaps.

Name:  columns
Value:  <'column-width'> || <'column-count'> [ / <'column-row-height'> ]?

name: column-row-height
value: auto | <length [0,∞]>
initial: auto

Sets available space in the block direction for column boxes, effectively acting as a cap on column box height.

auto: the available space is equal to the min inner height of the multicol container.

When 'column-row-height' has a value other than ''column-row-height/auto'',
[=overflow columns=] are not added in the inline direction.
Instead, additional column rows are created as needed
to host the excess columns.


If you set both `column-row-height` to a non-auto value and `height`, your may have some leftover space in your multicol. https://drafts.csswg.org/css-align would tell you how to deal with it. (Details of how that works are interesting, but secondary to the concept as a whole.)


### example

article {
  columns: 3 20em / 80vh;
  gap: 1em 2em;
}

```
****** ****** ******
****** ****** ******
****** ****** ******
****** ****** ******
****** ****** ******

****** ****** ******
****** ****** ******
****** ******
****** ******
****** ******
```

----

Notes:
* This could also be extended to have a `column-row-count` property, but I find the use cases less convincing, so I didn't include it.
* In a way, there's an implied `column-wrap: auto | nowrap | wrap` underlying this, where auto is the initial value, which resolves to nowrap if column-row-height is auto, and to wrap if not. I had it in my initial draft, but in practice I don't think there's much use for values other that `auto`, so I think this should not be exposed, at least in an initial version.

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2620334162 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 January 2025 00:32:35 UTC