[css-grid-1] Track Sizing Algorithm question
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Issue copied from original email from Jason.W He (hekylinwork@gmail.com):
In case of following grid.
--- 65% -- | -- 35% -- |
min-content
--- 65% -- | -- 35% -- |
auto
--- 65% -- | -- 35% -- |
Two column: 65%, 35%
Two row: min-content, auto
template-areas:
"head side"
"body side"
For row #1's track size, which it use min-content to define height of that row. When calculate height, why is row #1 been calculated using items with span of 2?
From spec, it consider items with span of 1 first, then consider at span of 2 that do not span a track with a flexible sizing function. Which the second row auto get caught.
When change second row's auto to 1fr (flexible sizing function), it now has correct behaviour.
I have sample to reproduce this under
https://codepen.io/Nness/pen/MrYMzQ?editors=1100#
When increment items inside area side. The area head's height now resize according to side.
Is this logical and correct behaviour to increase size of single span item by multiple span item?
It make sense to increase total size of multi-span grid track by item span across multiple track. How is that logical to change size of single-span grid track by item span across multiple track?
All the browser I have tested have exactly same result, does that means they all according to spec and have correct behaviour?
If use flexible sizing function is the only way to get this working and it is according to spec, then in which situation we want to use auto to have multiple span item change single span track's height behaviour?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked original email and CodePen reproduction, then read the CSS Grid Level 1 track sizing algorithm sections on spanning items and flexible sizing. Compare the reported min-content/auto case with the 1fr variant and browser behavior; done means determining whether the behavior matches the spec and clarifying the relevant wording or example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100