[css-grid] Stretching tracks fails to feed back into sizing algorithm · Issue #1150 · w3c/csswg-drafts (original) (raw)

Skip to content

Navigation Menu

• • GitHub Copilot Write better code with AI
  • GitHub Advanced Security Find and fix vulnerabilities
  • Actions Automate any workflow
  • Codespaces Instant dev environments
  • Issues Plan and track work
  • Code Review Manage code changes
  • Discussions Collaborate outside of code
  • Code Search Find more, search less
• Explore
  • Learning Pathways
  • Events & Webinars
  • Ebooks & Whitepapers
  • Customer Stories
  • Partners
  • Executive Insights
• • GitHub Sponsors Fund open source developers
  • The ReadME Project GitHub community articles
• • Enterprise platform AI-powered developer platform
• Pricing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up

Description

Continuing from #1117 examples 3/4/7/8...

<div style="display: grid; width: 200px;">
<img style="width: 100%;" src="http://placehold.it/50x50">
</div>

Here to resolve the size of the auto column, we check our children.
auto is somehow equivalent to minmax(auto, max-content).
The image has width: 100%; which cannot be resolved as the column has auto size, so for the minimum track size we consider 0px. And we use 50px, the content size of the image as maximum track size. And for the row, we use 50px too (the content size of the image).
Then the column size is affected by the default justify-content: stretch; which makes the auto column to grow up to 200px. The image is sized against that size of the column, so it ends up being 200x200. However the row is still 50px.

The row here being 50px is not very helpful. It should respond to the stretching of the track.

The responsible spec prose is in https://drafts.csswg.org/css-grid/#algo-overview where stretch is processed at the end of the grid sizing algorithm. It should instead be integrated as a final step of track sizing, after fr sizing, in order to be looped into later track-sizing passes.