Brian M. Hunt Brian M. Hunt - 1 year ago 83
CSS Question

CSS grid min-max keywords fail in Chrome

Chrome gives an

invalid property value
and doesn't respect the CSS:

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));


It also fails when
auto
is replaced with
min-content
and
max-content
.

It works as expected when
auto
is replaced by a fixed value e.g.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));


This is surprising because both
repeat
and
minmax
support the keywords.

The html is simple

<div class='wrapper>
<div>...</div>
<div>...</div>
</div>


and css

.wrapper {
display: grid
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
}

Answer Source

The error occurs across browsers (not just Chrome) because there is a violation of the spec.

When using auto-fill / auto-fit, there must be a definite min-size or max-size.

By "definite", the spec means:

A size that can be determined without measuring content.

https://www.w3.org/TR/css-sizing-3/#definite

When you set both arguments to content-based size, like this:

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));

... that's a violation of the spec because there is no definite size.

Using min-content and max-content would result in the same error for the same reason.

As long as one value is definite, and the first value is not fr (see below), the rule is valid.

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking grid-gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.


Original Answer - before question was revised

The problem is that 1fr cannot be set to the minimum value in minmax().

From the spec:

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

If max < min, then max is ignored and minmax(min,max) is treated as min.

As a maximum, a <flex> value sets the track’s flex factor; it is invalid as a minimum.

Note: A future level of this spec may allow <flex> minimums, and will update the track sizing algorithm to account for this correctly

<flex>

A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the free space in the grid container.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download