Skip to content

[css-grid-2] Allow minmax where max wins over min #1102

@fantasai

Description

@fantasai

https://lists.w3.org/Archives/Public/www-style/2016Oct/0076.html

Minmax would be far more useful if the max was always respected. Using grid to have a max-width content area but a full-width background is actually really hard without this feature. For a current use case I need to use

grid-template-columns: 1fr repeat(4, minmax(20%, 250px)) 1fr;

Being able to use viewport units and percentage units as a minimum value while specifying a pixel maximum would make so much sense. Otherwise I'll have to make do with using a pixel minimum, which will means my fr margins will take up no space at smaller viewports, so i'll have to add tedious media queries.
I realize i can set a percentage value and a max-width on the content itself and then set grid-template-columns to 1fr repeat(4, auto) 1fr but this is far from ideal.

I've been trying a lot of different ways to achieve the same layout. Please consider changing this.

This is a perfectly reasonable use case, but since min wins over max in CSS in general, we weren't able to solve it by inverting the priority (see response on www-style). So we need some other, syntactically-different, solution. Suggestions welcome.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions