4

In both Chrome and Firefox nightly I get the following error when setting this property:

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

Invalid property value

When looking at the repeat() syntax it seems that I entered it correctly? Both browsers still seem to somehow make it work, but it seems odd I'd get an error

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
HJW
  • 1,012
  • 2
  • 13
  • 32

1 Answers1

10

The problem is that repeat() requires two arguments (meaning repeat(auto-fill) is invalid), along with auto-repeat (either auto-fill or auto-fit) requiring a definite track size:

The <auto-repeat> variant can repeat automatically to fill a space, but requires definite track sizes so that the number of repetitions can be calculated. It can only appear once in the track list, but the same track list can also contain <fixed-repeat>s.

And a definite value is defined as:

A size that can be determined without performing layout; that is, a <length>, a measure of text (without consideration of line-wrapping), a size of the initial containing block, or a <percentage> or other formula (such the “stretch-fit” sizing of non-replaced blocks [CSS2]) that is resolved solely against definite sizes.

As such, repeat(auto-fill, 1fr) is invalid, but repeat(auto-fill, 100px) is valid.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71