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.

Sign up for GitHub

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

Jump to bottom

[css-grid] Clarification how should %-rows resolve. #6118

Closed
bfgeek opened this issue Mar 19, 2021 · 3 comments
Closed

[css-grid] Clarification how should %-rows resolve. #6118

bfgeek opened this issue Mar 19, 2021 · 3 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-grid-1

Comments

@bfgeek
Copy link

bfgeek commented Mar 19, 2021

Consider the following testcase ( https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=9084 )

<!DOCTYPE html>
<div style="display: grid; width: 200px; grid-template-rows: 200%; grid-template-columns: 100px 100px; border: solid;">
  <div style="height: 100px; background: orange;"></div>
  <div style="background: cyan;"></div>
</div>

Here there is a pretty large difference between webkit/blink & firefox/edge. webkit/blink appear to be re-resolving rows against a (now definite) block-size.

I don't think this is in the spec, however it somewhat matches what happens in the inline-direction with all browsers, e.g. ( https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=9085 )

<!DOCTYPE html>
<div style="display: inline-grid; grid-template-rows: 100px 100px; grid-template-columns: 200%; border: solid;">
  <div style="width: 100px; background: orange;"></div>
  <div style="background: cyan;"></div>
</div>
@bfgeek
Copy link
Author

bfgeek commented Mar 19, 2021

@fantasai @tabatkins we are up to the point in Blink's new grid implementation where we are determining when we need to re-resolve rows/columns, and this came up as not clear from the specification.

@KurtCattiSchmidt fyi.

@Loirooriol
Copy link
Contributor

This is a recurring topic which was last discussed in #5566. @atanassov objected to aligning with Firefox since it would break the symmetry. So webkit/blink are right.

The spec already implies that, https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage

If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto, for the purpose of calculating the intrinsic sizes of the grid container and then resolve against that resulting grid container size for the purpose of laying out the grid and its items.

There is #3418 about adding further clarifications.

@bfgeek
Copy link
Author

bfgeek commented Mar 19, 2021

@Loirooriol Thanks for the clarification, we'll follow the current blink/webkit behaviour, and add a few more tests.

@tabatkins tabatkins added the Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. label Jun 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-grid-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tabatkins @bfgeek @Loirooriol