CODEWITHSUNDEEP
csscss-grid
HJW
HJW

Reputation: 1032

css grid property value invalid

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

Upvotes: 4

Views: 3938

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

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.

Upvotes: 11

Related Questions