[css-grid] Grid implies that items are always resolved against a definite size · Issue #1319 · w3c/csswg-drafts · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Grid implies that items are always resolved against a definite size #1319

Closed
tabatkins opened this issue May 2, 2017 · 3 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 Tracked in DoC

Comments

@tabatkins
Copy link
Member

In the last paragraph of section 11.1, Grid says:

Once the size of each grid area is thus established, the grid items are laid out into their respective containing blocks.

This seems to imply that, at this point, the grid areas should be treated as having definite heights and widths, so that %s on grid items always resolve. Is this what we actually wanted?

@atanassov
Copy link
Contributor

Yes, after step 4 of section 11.1 grid area dimensions should be treated as definite.

One clarification we could add (I couldn't find) is that baseline alignment of grid items can also affect the row and column dimensions. For example an auto height row is defined by the max( maxHeightGridItem, maxAscentOfFirstBaselines + maxDescentOfLastBaselines) where maxAscentOfFirstBaselines is based of any two or more items participating in the row that have computed self-align: baseline or self-align: stretch(start) and content-align: first baseline; (similar for maxDescentOfLastBaselines).

I'm not too sure if the clarification above will be helpful for anyone other than implementers but it is an important one to get track resolutions correct.

@javifernandez
Copy link
Contributor

One clarification we could add (I couldn't find) is that baseline alignment of grid items can also affect the row and column dimensions.
Well, I think that is already in the spec, although maybe expressed not enough clearly, in the following sentence:
https://drafts.csswg.org/css-align-3/#baseline-align-content
When a box participates in first (last) baseline content-alignment it effectively aligns its start (end) edge with the other boxes in its baseline-sharing group, then gains additional start (end) padding to align its alignment subject’s (i.e. content’s) baseline with those of its baseline-sharing group. See §8.3 Aligning Boxes by Baseline for exact details. This can increase the intrinsic size of the box.

and also here
https://drafts.csswg.org/css-align-3/#baseline-align-self

When a box participates in first (last) baseline self-alignment it effectively first aligns its start (end) edge with the other boxes in its baseline-sharing group, then gains additional start (end) margin to align its baseline with those of its baseline-sharing group. See §8.3 Aligning Boxes by Baseline for exact details. This can increase the intrinsic size of the box.

I also agree that these clarifications may be way more interesting for implementors, but they indeed help to understand how the tracks are sized and how they acquired their actual size.

As a matter fact, my main doubt regarding this concept of "baseline affecting the intrinsic size" is that is somehow disconnected with the track sizing algorithm. There isn't any specification clarifying when it should be run.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed percentage children of stretch grid items, and agreed to the following resolutions:

  • RESOLVED: copy from flexbox to grid: do what 1320 says :)
  • RESOLVED: copy from flexbox to grid: do what 1319 says :)
The full IRC log of that discussion <dauwhe> Topic: percentage children of stretch grid items
<astearns> github: https://github.com//issues/1319
<dauwhe> TabAtkins: flexbox has special text defining if your flex item is stretched and flex item is definite height specified
<dauwhe> ... grid doesn't have the same text, but some bits of it imply that
<dauwhe> ... so it would be useful to have it apply to grid
<dauwhe> ... easier 'cause it's sized according to tracks
<dauwhe> ... rossen said this should work
<dauwhe> ... for the same reason as flex
<dauwhe> ... 1320 is the same thing
<dauwhe> ... any opinions to the contrary?
<dauwhe> (silence)
<dauwhe> astearns: any objection?
<dauwhe> RESOLVED: copy from flexbox to grid: do what 1320 says :)
<dauwhe> RESOLVED: copy from flexbox to grid: do what 1319 says :)
<dauwhe> fantasai: axis names is an editorial thing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 Tracked in DoC
Projects
None yet
Development

No branches or pull requests

5 participants