[css-grid] Collapsed grid tracks and content distribution #1140

Closed
SelenIT opened this Issue Mar 29, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@SelenIT
Collaborator

SelenIT commented Mar 29, 2017

According to the CSS Grid spec, the grid tracks that collapse because of auto-fit repetition, have zero width and the gutters between them also collapse:

When a collapsed track’s gutters collapse, they coincide exactly—the two gutters overlap so that their start and end edges coincide. If one side of a collapsed track does not have a gutter (e.g. if it is the first or last track of the implicit grid), then collapsing its gutters results in no gutter on either “side” of the collapsed track.

The question is, how these collapsed tracks and gutters should be treated for the justify-/align-content purposes? On the one hand, the collapsed tracks are still technically separate tracks, so they may be distributed as usually (which we currently see in Blink/WebKit implementation). On the other hand, "the exact coincidence" of the collapsed grid gutters, one of which is the last track gutter, seems to imply that there would be effectively no gutter after the last non-empty track, so no extra space to distribute, and the non-empty tracks should be distributed as if the collapsed tracks didn't exist at all. This is what currently the Gecko implementation does.

The difference in the two implementations behavior can be seen in this example (provided by @mrego): http://jsbin.com/rosarub/edit?html,css,output

Personally, I believe that the Firefox's behavior (ignoring the collapsed tracks completely) makes more sense from the practical perspective. Having invisible things that affect distribution of the visible content is confusing and sometimes even annoying, the same way as wrapping abspos children of the flex container in anonymous flex items was. I supposed that that the whole point of collapsing tracks is making them not affecting the layout at all. But it's just my opinion.

Should the spec be clarified for this aspect?

@javifernandez

This comment has been minimized.

Show comment
Hide comment
@javifernandez

javifernandez Mar 29, 2017

Contributor

I agree this should be clarified in the CSS Box Alignment specification:

https://drafts.csswg.org/css-align-3/#distribution-grid

Alignment Subject(s) The grid tracks in the appropriate axis.

Perhaps it should specify whether those tracks can be or not collapsed tracks.

Contributor

javifernandez commented Mar 29, 2017

I agree this should be clarified in the CSS Box Alignment specification:

https://drafts.csswg.org/css-align-3/#distribution-grid

Alignment Subject(s) The grid tracks in the appropriate axis.

Perhaps it should specify whether those tracks can be or not collapsed tracks.

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Mar 30, 2017

Contributor

I think as an author I prefer the Gecko version - although I can see the logic of both. However if I am distributing space I probably want it distributed between the things I can currently see.

Contributor

rachelandrew commented Mar 30, 2017

I think as an author I prefer the Gecko version - although I can see the logic of both. However if I am distributing space I probably want it distributed between the things I can currently see.

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Mar 30, 2017

Contributor

Yeah, the collapsed tracks should be essentially invisible, as they are when gaps are added. Content distribution effectively increases the gaps, and if we later add the ability to style gaps (e.g. by adding column/row rules), then that will be noticeable.

Contributor

fantasai commented Mar 30, 2017

Yeah, the collapsed tracks should be essentially invisible, as they are when gaps are added. Content distribution effectively increases the gaps, and if we later add the ability to style gaps (e.g. by adding column/row rules), then that will be noticeable.

fantasai added a commit that referenced this issue Mar 30, 2017

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Mar 30, 2017

Member

@javifernandez Note that Chrome's implementation is actually wrong for a different reason - if you put i2 into the fourth column (so it's columns 2 and 3 that collapse), Chrome's rendering puts a lot of extra space in the middle, indicating that each of the gutters there are getting the extra space and independently laying out. The spec requires that the gutters coincide, tho, so it should look exactly like your current example, with the tracks shifted to the left side.

But yeah, Firefox's rendering is intended, and we're clarifying now.

Member

tabatkins commented Mar 30, 2017

@javifernandez Note that Chrome's implementation is actually wrong for a different reason - if you put i2 into the fourth column (so it's columns 2 and 3 that collapse), Chrome's rendering puts a lot of extra space in the middle, indicating that each of the gutters there are getting the extra space and independently laying out. The spec requires that the gutters coincide, tho, so it should look exactly like your current example, with the tracks shifted to the left side.

But yeah, Firefox's rendering is intended, and we're clarifying now.

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Mar 30, 2017

Contributor

Well, we technically didn't specify that the space is part of the gutter, either, so they can't have been wrong for that reason just yet. But now they are! All clarified! Thanks for the report!

Contributor

fantasai commented Mar 30, 2017

Well, we technically didn't specify that the space is part of the gutter, either, so they can't have been wrong for that reason just yet. But now they are! All clarified! Thanks for the report!

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Mar 30, 2017

Member

Man, where's that space gonna even go if the gutters coincide, tho? Even if you put it to one side of the gutter (rather than expanding the gutter), the gutters are on top of each other!

Member

tabatkins commented Mar 30, 2017

Man, where's that space gonna even go if the gutters coincide, tho? Even if you put it to one side of the gutter (rather than expanding the gutter), the gutters are on top of each other!

@SelenIT

This comment has been minimized.

Show comment
Hide comment
@SelenIT

SelenIT Mar 30, 2017

Collaborator

Thanks a lot for clarifying the specs!

Collaborator

SelenIT commented Mar 30, 2017

Thanks a lot for clarifying the specs!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment