minmax fails (invalid property value)

Viewed 2686

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));
}
1 Answers
Related