minmax fails (invalid property value)

by

When using auto-fill or 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 minmax 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.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  5. Aligning grid items across the entire row/column (like flex items can)
  6. Position deeply nested elements in a higher level grid container
  7. Align child elements of different blocks
  8. Browser support for CSS Grid
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. What is difference between justify-self, justify-items and justify-content in CSS grid?
  13. How to make the items in the last row consume remaining space in CSS Grid?
  14. A grid layout with responsive squares
  15. Create a Masonry grid with flexbox (or other CSS)
  16. Why percentage value within grid-gap create overflow in CSS grid?
  17. Using CSS transitions in CSS Grid Layout
  18. How can I make a div span multiple rows and columns in a grid?
  19. CSS Grid – Auto height rows, sizing to content
  20. How to make a column span full width when a second column is not there? (CSS Grid)
  21. Can I have a varying number of columns per row in a CSS grid?
  22. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  23. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  24. Percentage padding / margin on grid item ignored in Firefox
  25. Setting different lengths for grid gaps in CSS Grid
  26. How do you collapse unused row in a CSS grid?
  27. Can I make a CSS grid with dynamic number of rows or columns?
  28. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  29. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  30. grid-area does not seem to work with the attr function, is this by design?

Leave a Comment