The problem
It is impossible to write a CSS component that:
- has a default width, whether it's a fixed width or a keyword other than
auto (e.g. 200px or fit-content)
- stretches properly when placed in a grid layout with
justify-items: stretch, without any contextual override (i.e. no &:is(.grid > *) { width: auto; })
The solution
A new default-width property that defines the width of a width: auto element, while allowing it to stretch in a grid context.
Related to #7427, and could fix #3226 (comment)
The problem
It is impossible to write a CSS component that:
auto(e.g.200pxorfit-content)justify-items: stretch, without any contextual override (i.e. no&:is(.grid > *) { width: auto; })The solution
A new
default-widthproperty that defines the width of awidth: autoelement, while allowing it to stretch in a grid context.Here's a Codepen that has a good visual explanation.
Related to #7427, and could fix #3226 (comment)