Allow spacing values in auto-rows/auto-cols e.g. auto-rows-12/auto-cols-8

[vincerubinetti]

#15170 (comment)

I was surprised to learn that these properties don't support spacing values (or whatever they're called) like most properties, e.g. gap-2.

I'm also surprised that I seem to be the first one requesting this? Using an explicit value for these properties would seem pretty common, and is one of the first examples on MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-auto-rows

[RobinMalfait]

Hmm, that is a good question! I also don't know why nobody wanted this yet :D

Let's think, one potential thing to keep in mind is that this accepts a lot of different kinds of values.

• So auto-rows-12 could map to 3rem such as other utilities.
• We could also support auto-rows-12% to map to 12%.
• The keywords are already captured (auto-rows-fr, auto-rows-min, auto-rows-max, auto-rows-auto).

Then last but not least, all the others (like flex values such as 12fr or minmax(…)) could keep using the arbitrary values as an escape hatch.

or would you expect that auto-rows-12 maps to 12fr instead 🤔

What do you think about this? (And we can extend this to auto-cols-* of course)

[vincerubinetti]

We could also support auto-rows-12% to map to 12%.

Wouldn't percents just be a fraction, like e.g. w-1/2? Do other utilities use %? I've never used that.

or would you expect that auto-rows-12 maps to 12fr instead

I guess grid sizing is a somewhat special case due to the special keywords. Like grid-cols-3 does not mean 3 * spacing or even 3fr, but a third special thing (minmax(0,1fr) if I recall).

But in the specific case of auto-rows/cols, my gut reaction would expect it to just mean an absolute spacing size like padding/gap/etc. I could be wrong, but would there ever be a need for e.g. grid-auto-rows: 12fr? Since they're all 12fr, wouldn't that always be equivalent to 1fr, and thus auto-rows-fr?

I know you can do repeating patterns like grid-auto-rows: 100px 10px, but I don't think TW supports that type of thing anywhere else (without doing an [arbitrary-value]).

[RobinMalfait]

Wouldn't percents just be a fraction, like e.g. w-1/2? Do other utilities use %? I've never used that.

Fractions could work as well. Typically we either keep the fraction as-is (aspect-1/2 → aspect-ratio: 1/2), or use a calc (w-1/2 → width: calc(1 / 2 * 100%)). We do have precedent for % in the name, e.g. via-20%, mask-t-from-2%.

Since they're all 12fr, wouldn't that always be equivalent to 1fr, and thus auto-rows-fr?

Yeah you're right, but maybe there was a specific use case you had in mind.

I do agree that using the spacing scale makes the most sense here, just want to make sure we don't miss something obvious!

[RobinMalfait]

Started a PR: #20229