Re: [csswg-drafts] [css-multicol] How do elements between column-span and its multicol ancestor appear around the span (#1072)

This isn't in a draft anywhere yet (although I have some private notes scattered around), but we've been discussing the possibility of introducing some kind of switch to decide what to do with excess content when you've filled you allotted (max) width and (max) height. It'd allow authors to pick between the current behavior (excess content goes to overflow columns appended in the inline progression direction), and a different one where excess content would append a second "row" to the multi-column, in the block progression direction (possibly based on some kind of `column-height` property rather than the `height` property, so that it could consume additional layout space). So, you could have 3 (or whatever) columns, of 400px (or whatever) height, and we'd they'd be full, you'd get another 3 x 400px set of columns below them.

```css
article {
  columns: 3 20em;
  column-height: 80vh;
  column-which-way-do-I-go-when-I-am-full: block;
  gap: 1em 2em;
}
```
```
******* ******* ******* 
SPANNER-SPANNER-SPANNER
******* ******* *******
******* ******* *******
******* ******* *******


******* ******* ******* 
******* ******* *******
******* ******* *******
******* ******* *******
******* ******* *******


******* ******* *******
******* ******* *******
SPANNER-SPANNER-SPANNER
******* ******* *******
******* ******* **
```

Regardless of exactly how that ends up working, something along these lines has been brought up multiple times, and it'd be good to avoid painting ourselves into a corner.

In that sort of model, we have two things that could reasonably called "rows":
1. A set of column boxes that go above (or below) a column spanner
2. The box you append in the block direction, which itself contains a bunch of column boxes, possibly horizontally separated by more spanners

```
******* ******* *******   <-- this is a (1)        |
SPANNER-SPANNER-SPANNER                            |
******* ******* *******   <-- this is another (1)  | <-- This is a (2)
******* ******* *******   |                        |
******* ******* *******   |                        |


******* ******* *******   <-- this is another (1)  | <-- This is another (2)
******* ******* *******   |                        |
******* ******* *******   |                        |
******* ******* *******   |                        |
******* ******* *******   |                        |


******* ******* *******   <-- this is another (1)  |
******* ******* *******   |                        |
SPANNER-SPANNER-SPANNER                            | <-- This is another (2)
******* ******* *******   <-- this is another (1)  |
******* ******* **        |                        |
```

To some degree, for the current issue, we can do whatever we want, because we're only introducing internal terminology that won't be visible through any property/value/API..., but if we could get sensible names from the get go, that'd be great.

At first, I'd tend to call (1) "rows", and to call (2) "row groups".

However, if we want to make things like the `row-gap` property apply to multicol eventually, it feels like it'd be a lot more appropriate for it to apply to the spaces between the (2)s than between the (1)s. Same if we want to add a `column-row-count`, or more of that sort of things.

So if we call (2) "rows", what do we call (1)? "lines" for the analogy with flexbox lines? "group"? "set"? "line" probably feels the best suggestion so far to me, I'm not sure.



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

Received on Wednesday, 15 May 2019 07:07:57 UTC