[css-align][css-multicol] 'justify-content' other than 'normal' or 'stretch' should change column count/size rules

[dbaron]

The sizing specification describes how justify-content applies to multicols. However, this application seems less than ideal given its interaction with the column count and sizing rules in multicol.

In particular, when justify-content is not normal or stretch, I think a non-auto column-width should apply as specified rather than being stretched so that the columns plus the column gaps fill the multicol. It seems pretty awkward not to do this.

I also wonder whether column-fill: auto that doesn't fill all of the columns should cause some of the columns not to be generated, and leave only the filled columns (with their widths calculated as though they were all to be generated) to be justified. I have mixed feelings about this one, though.

[dbaron]

Er, the spec already says the thing about non-auto column-width, but for some reason it conditions it to only be when column-count is also non-auto. I don't see why that condition should be there.

(Also, it uses "with" when it should be using "non-auto", given that elements always have computed values of all properties.)

[frivoal]

for some reason it conditions it to only be when column-count is also non-auto. I don't see why that condition should be there.

I don't see it either.

Additionally, it feels like we need to say a bit more about how do the column-gaps interact with the distributed space.
For instance, if you have

article {
  columns: 3 100px;
  column-gap: 10px;
  width: 340px;
  justify-content: space-evenly;
}

which of the following two behaviors does it mean:

1. (340 - 100 * 3) / 4 = 10px between and around each column
2. (340 - 100 * 3 - 10 * 2 ) / 4 = 5px before the first column and after the last column and 5+10=15px between the columns?

Behavior 2 is probably the one the spec currently intends (since it does not give enough details to define anything else), but would mean that the author needs to set the column-gap to 0 to get space-evenly and space-around to have their intended effect. In addition to being probably unexpected by authors, this does not have good fallback behavior in browsers that do no support justify-content on multi-col. Also, even in browsers that do support justify-content, if the width of the multicol is "just right", you may end up with no space between the columns at all, which seems pretty bad too.

So I think Behavior 1 would be nicer, but it requires that we give a new meaning to column-gap in these situations. The logical answer would be that becomes a minimum spacing. For space-between, that would be the minimum space between the columns. For left, right, start, end, and presumably center, that would be the exact space between the columns. For space-evenly it would be the minimum size of the even spaces. for space-around it could be the minimum space between the columns, with a minimum of half that space before the first one and after the last one.

In that case, with the space-around and space-evenly values, unless we want to allow columns with a used width smaller than the specified width, we also need to change the formula to get the number of columns. For instance:

article {
  columns: 3 100px;
  column-gap: 10px;
  width: 320px;
  justify-content: space-evenly;
}

has 3 columns if you ignore justify-content or apply behavior 2, but it needs to have 2 columns if you apply behavior 1:
3*100 + 4*10 > 320, so we cannot have 3 columns. Instead we can have 2, with 4 30px spaces around them.

This would mean changing the algo to determine the number of columns. Specifically, this part:
floor((U + column-gap)/(column-width + column-gap)))
would stay as if if justify-content is any value other than space-around or space-evenly, but would be changed to floor((U + 2* column-gap)/(column-width + column-gap))) for space-evenly and to floor((U + 1.5* column-gap)/(column-width + column-gap))) for space-around.

[fantasai]

This just seems like an error in applying https://lists.w3.org/Archives/Public/www-style/2016May/0208.html so taking it off the agenda and marking Needs Edits...

[frivoal]

This just seems like an error in applying https://lists.w3.org/Archives/Public/www-style/2016May/0208.html

This seems fair

so taking it off the agenda and marking Needs Edits...

I am not so sure about that. The minutes you quoted do not provide an answer to how the column-gaps interact with the distributed space, as I was discussing in my last comment. This is a discussion we still need to have.

[fantasai]

The obvious answer would be "in the same way as gaps between columns in Grid".

[tabatkins]

Fixed now. We went with matching Grid's behavior - spacing is added in addition to the gutters, giving Florian's behavior #2. While I agree that this has slightly unfortunate implications with multicol's default column-gap, we think it's more important to have a consistent behavior than to give this a slightly different behavior that's slightly more optimal by default.

Also, even in browsers that do support justify-content, if the width of the multicol is "just right", you may end up with no space between the columns at all, which seems pretty bad too.

Grid has the same behavior, and is solved the same way - you can set up your minimum values with a combination of *-gap and padding on the container, in a ratio that matches the desired distribution, then the distribution spreads out the extra space accordingly.

I also wonder whether column-fill: auto that doesn't fill all of the columns should cause some of the columns not to be generated[...]

This seems to require a distinction between two different stretching behaviors: one where all of the columns are stretched to fill the multi-col, and one where only the filled ones are stretched. We could make a distinction and say that normal and stretch operate on all columns whereas the other values cause the empty columns to be dropped, but that seems a bit weird. In any case, filing as a separate issue: #1565