w3c / w3c/csswg-drafts

[css-grid-1] Track Sizing Algorithm question

Open
#2,873 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-grid-1 Needs Design / Proposal Target Revision: Next Tracked in DoC
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.