[csswg-drafts] [css-multicol] Do we need column-wrap as well as column-height (#11754)

rachelandrew has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-multicol] Do we need column-wrap as well as column-height ==
I've added an initial draft based on the resolution in https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2625930018. That resolution resolved to add 'column-height' with the suggestion that setting a value of 'column-height' other than 'auto' should trigger the creation of column rows, rather than new columns in the inline direction, as currently happens.

Using 'column-height' means that authors have the option, when creating these overflow rows to have additional space in the multicol container which can then be controlled by the alignment properties. For example:

```css
.container {
  block-size: 20em;
  column-count: 3;
  column-height: 5em;
}
```

In this case,`column-height` is the trigger for rows. Assuming we have less content than would create rows that fill or overflow the block-size of the multicol container, there's extra space. I imagine this would then be controlled in the same way as additional space in a grid container after laying out columns, meaning you could center the multicol inside the container.

However, with column-height the trigger for wraping this would mean you couldn't set a column-height yet keep inline column overflow, in the case that you wanted to have additional space in a multicol that was doing inline overflow. So you couldn't use the preceding example, keep inline overflow of columns then center the single line of columns inside the multicol container.

Also, using `column-height` to trigger wrapping seems a little magical and doesn't map to the way other things behave. 

In my original suggestion I had proposed a `column-wrap` property to trigger the wrapping. My suggestion is to keep that as the trigger, but maintain this `column-height` property, as this will allow for the scenario mentioned, with inline overflowing columns and extra space, it also means that to get wrapping you asking for wrapping, rather than set a height on columns and something else happens. 

Therefore, the following example would have a multicol container height of 20em, `column-height` of 5em. If there was too much content after filling three 5em tall columns, columns would be created in the inline direction. The extra space in the block direction could be distributed by the alignment properties.

```css
.container {
  block-size: 20em;
  column-count: 3;
  column-height: 5em;
}
```

To get rows from this example, you add the `column-wrap` property. After the three columns are filled, a new row of three columns is created in the block direction, and this continues until all content is displayed. Again, if this results in spare space, this can be distributed by alignment.

```css
.container {
  block-size: 20em;
  column-count: 3;
  column-height: 5em;
  column-wrap: wrap;
}
```

Adding this to the agenda in the hope of getting a resolution on this property. If we resolve on this, there's a secondary point to resolve on.

What is the behavior, if the author sets `column-wrap: wrap`, a height on the multicol container, but `column-height` is `auto`. I think the two options are:

1. Do nothing, `column-wrap: wrap` only does something if `column-height` is not `auto`.
2. Create new rows, if there is overflow, essentially resolving `column-height` to the available height of the multicol container, and creating new rows of that same size in the block direction.

My preference is 2, as then we maintain the trigger behavior of `column-wrap`, and it feels reasonable logical, but we'd need a decision one way or another should we adopt `column-wrap` and `column-height`.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11754 using your GitHub account


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

Received on Thursday, 20 February 2025 08:19:48 UTC