[css-grid] Shortcut syntax for repeat(M, 1fr)

[LeaVerou]

I’ve noticed myself often defining grids where all I want is a bunch of equally sized rows, columns, or both. I.e. things like:

grid-template: repeat(M, 1fr) / repeat(N, 1fr);

or in one direction:

grid-template: 20em 1fr / repeat(N, 1fr);

Look at the first syntax. Isn't that a bit clunky, just to say that I want a M×N grid?
Wouldn’t it be much more elegant to be able to say:

grid-template: M / N;

And AFAIK <integer> has no meaning in grid-template right now, so the syntax is up for grabs and can be combined with other units as necessary, e.g.

grid-template-columns: 10em 4; /* equivalent to grid-template-columns: 10em repeat(4, 1fr);  */

Though admittedly, when combined with other units, its meaning is not as obvious as when used by itself.

[FremyCompany]

I'm not sure why we should prefer 1fr over the other options here.

[FremyCompany]

Also I think this is very confusing because 0 is a valid length

[LeaVerou]

I'm not sure why we should prefer 1fr over the other options here.

...which are?

Also I think this is very confusing because 0 is a valid length

Not sure what you mean?

[FremyCompany]

I just don't think that 1fr is that one thing you really want to repeat (significantly more often than all the other things you can put in the repeat function).

In other words, creating a shortcut to easily repeat a fixed number of 1fr tracks seems like it fits your current specific use case, but I don't think it warrants the additional syntax because there is a lot of diversity in grid track sizing, and I don't think 1fr is even the majority of what people use in the repeat function.

---

More fundamentally, I don't think we want to get an <integer> to create tracks on its own because we already have grid: 0 / 0 which creates a grid with one track of 0px breadth in each direction

https://wptest.center/#/2x9sn4 (contrived example but I just wanted to show the syntax is valid)

[LeaVerou]

I just don't think that 1fr is that one thing you really want to repeat (significantly more often than all the other things you can put in the repeat function).

You don't think that "N equal sized rows/columns" is more common than other things?

In other words, creating a shortcut to easily repeat a fixed number of 1fr tracks seems like it fits your current specific use case,

I've been at this long enough to know not to suggest things that just fit my one particular case. I suggested this after stumbling on use cases that involved that several times, over the several months since I started using grid. In fact, every grid I've ever defined involved this in at least one direction.

More fundamentally, I don't think we want to get an to create tracks on its own because we already have grid: 0 / 0 which creates a grid with one track of 0px breadth in each direction

That’s actually a good argument. I wonder if we can define it as <integer> > 1 only. In that case there's no ambiguity.

[rachelandrew]

You don't think that "N equal sized rows/columns" is more common than other things?

I don't think so. I'm also concerned it would further lead people to believe that N fr == N equal sized, which isn't the case, it's really minmax(auto,1fr), equal sized would be minmax(0,1fr).

[mrego]

Also the default size for a track is auto (if grid-auto-columns|rows is not defined).
So maybe grid: 3 / 4; could be something like grid: repeat(3, auto) / repeat(4, auto).

[fantasai]

@LeaVerou based on the comments here, would you like to retract (close) the issue or raise it to the WG?

[LeaVerou]

It can repeat whatever you think would be most useful, 1fr was just a suggestion. minmax(auto, 1fr) or minmax(0, 1fr) would also be fine, even auto. My point was more about how it would be useful to have a <number> syntax as a shortcut for repeat(n, something). I don't know if this applies to others, but I always end up writing this by accident, being puzzled for a bit, then remembering I have to use repeat().

[fantasai]

That does not actually answer the question that I asked, but I'll interpret it as “please Agenda+”...

[Dan503]

I'm in favour of @LeaVerou I'm particularly interested in a shorter method of writing the repeat(X, minmax(0,1fr)) syntax.

There was another issue where people wanted 1fr to change to minmax(0,1fr) by default but was shut down due to it's potential to break sites. I think this could be an opportunity to remedy that.

I don't like the idea of it being a unitless value though. I'm thinking a rep unit would make sense (rep like repeat).

This is what I'm thinking:
2rep = repeat(2, minmax(0, 1fr))

[Dan503]

@FremyCompany

I just don't think that 1fr is that one thing you really want to repeat (significantly more often than all the other things you can put in the repeat function).

You seem to be a bit out of touch with how content authors use css grid.

The most common use case for us content authors above all else is X number of equally sized columns.

That makes repeat(X, minmax(0, 1fr)) the most frequently used pattern. Ok well repeat(X, 1fr) is the most frequent used but only because the content usually isn't wide enough to break the grid and people don't want to have to write the minmax stuff if they don't have to.

[LeaVerou]

The most common use case for us content authors above all else is X number of equally sized columns.

THIS. Any design system I've seen starts from many equally sized columns and then elements can span 2 or more, but the grid itself is equal sized columns. Not to mention things like game boards etc.

[tabatkins]

There's a fairly fundamental grammar conflict here, tho. grid-template-rows: 0 is already valid, and means "one 0px row".

Having 0 and 1 mean different things seems... unfortunate.

[Dan503]

Having 0 and 1 mean different things seems... unfortunate.

That's partly why I'm suggesting there be a rep unit or something to represent this.

[FremyCompany]

The most common use case for us content authors above all else is X number of equally sized columns.

THIS. Any design system I've seen starts from many equally sized columns and then elements can span 2 or more, but the grid itself is equal sized columns. Not to mention things like game boards etc.

Oh, so, what you want is not 1fr, but minmax(0, 1fr). I agree it's currently cumbersome to type grid-template-columns: repeat(12, minmax(0, 1fr)) if what you want is just a grid snapping system for 13 equally-spaced out lines.

I still don't think using integers directly is nice idea inside grid-template-columns but I understand what you are trying to achieve better now. I guess I had mainly been looking at manually-curated grids at the time, but yes, if you want a grid in a similar sense as a bootstrap grid, I understand the request now.

Still, this syntax prohibits you from using most of the useful grids features like named lines. Maybe that part is just me but I always build my fixed grids in such a way that they have medium and large lines, for instance like this if I want a 12-column grid:

grid { grid-template-rows: [start] repeat(2, repeat(2, repeat(3, minmax(0,1fr) [small]) [medium]) [large] [half]) [end]; }
.small { grid-column-end: span small; }
.medium { grid-column-end: span medium }
.large { grid-column-end: span large }
.half { grid-column-end: span half }
.full { grid-column-start: start; grid-column-end: end; }

Then I can use a different layout on tablets where I only have 6 columns:

grid { grid-template-rows: [start] repeat(2, repeat(3, minmax(0,1fr) [small]) [medium] [half]) [large] [end]; }

But I can conceive there are probably use cases where you just know what you want and you don't need to be responsive like this. Just wanted to say so that people don't read too much into my first comments, I don't feel as strongly now that I have seen more use cases.

[Dan503]

I really like the idea of having a quick "create this many equal columns" unit. You can do stuff like this then:

grid-template-columns: 20px 12rep 20px;

Which would be the equivalent of writing this:

grid-template-columns: 20px repeat(12, minmax(0, 1fr)) 20px;

or maybe do something like this:

grid-template-columns: 20px 3rep 100px 3rep 20px;

Equivalent to this:

grid-template-columns: 20px repeat(3, minmax(0, 1fr)) 100px repeat(3, minmax(0, 1fr)) 20px;

You can still name the lines before and after the repeated columns:

grid-template-columns: 20px [left-start] 3rep [left-end] 100px [right-start] 3rep [right-end] 20px;

Translation:

grid-template-columns: 20px [left-start] repeat(3, minmax(0, 1fr)) [left-end] 100px [right-start] repeat(3, minmax(0, 1fr)) [right-end] 20px;

Or maybe cols and rows units might make more sense but then you have two different units for doing essentially the same thing:

grid-template-columns: 20px 12cols 20px;
grid-template-rows: 12rows;

Translation:

grid-template-columns: 20px repeat(12, minmax(0,1fr)) 20px;
grid-template-rows: repeat(12, minmax(0,1fr));

(I'm not actually a fan of the bootstrap approach to grid systems but it's a good use case for this)

[Dan503]

If this was implemented though I'm positive that there would be many people who would start abusing 1rep (or whatever the unit ends up being) as a substitute for 1fr just because it ends up equating to minmax(0,1fr) rather than minmax(min-content, 1fr).

They might start using it like this

grid-template-columns: 100px 1rep 1rep 20px;

Which is like saying

grid-template-columns: 100px repeat(1, minmax(0,1fr)) repeat(1, minmax(0,1fr)) 20px;

And then get confused why this ends up creating an extra column

grid-template-columns: 100px 1rep 2rep 20px;

Or get confused why 1.5 wouldn't work

/* invalid, you can't repeat something 1.5 times */
grid-template-columns: 100px 1rep 1.5rep 20px; 

I'm thinking that a new unit should also be created for minmax(0,1fr) to prevent the abuse of the repeat unit.

1efr (short for "1 equal fraction") would be a good one :)

grid-template-columns: repeat(3, 1efr);

Translated:

grid-template-columns: repeat(3, minmax(0,1fr));

[SelenIT]

Maybe a short-named functional notation (e.g. grid-template-columns: fr(12) or grid-template: fr(4) / fr(3)) could be a compromise solution?

[Dan503]

I like the idea of a function actually instead of a unit. Units look too much like a single column/row.

Since we want a column generated this way to equal minmax(0,1fr) and not actually 1fr then I don't think fr(12) is the right syntax.

I think I would prefer this:

grid-template-columns: cols(12);
grid-template-rows: rows(12);
grid-template: rows(4) / cols(3);

[Dan503]

If efr ends up becoming a thing (#2677) then this could work:

grid-template-columns: efr(12);
grid-template-rows: efr(12);
grid-template: efr(4) / efr(3);

then we can also have the fr equivelent so that people have a choice over what type of columns/rows they want.

grid-template-columns: fr(12);
grid-template-rows: fr(12);
grid-template: fr(4) / fr(3);

[fantasai]

If there was an obvious “best choice” for how to size those tracks @tabatkins and I think it would be fine to make the second argument of repeat() optional (so you could just say repeat(12)). However, we don't think there is one: in particular, it's not clear whether 1fr or minmax(0, 1fr) or even auto would be more desirable in general.

Note, part of the problem with verbosity here is stemming from problems with 1fr's automatic minimum, which is too aggressive and results in authors wanting to use minmax(0, 1fr) a lot more often than is ideal. If we can fix the automatic minimum per #1865 (which we'd like to resolve if we can just figure out the Web-compat impact), then that, at least, should become less of an issue.

[Dan503]

@fantasai what is the issue you see with introducing a new unit like efr to represent minmax(0,1fr)? (#2677)

The reason we tend to want easy access to minmax(0,1fr) is because we have lots of ways of controlling how we want the content to overflow.

Maybe we want content to scroll. Maybe we want content to break long words and wrap them. What we generally don't want is for the grid to get forced out of it's original container or cause a major change to the signed off design. The 1fr unit robs us of that choice since it does not allow the content to overflow.

If someone posts a long link in a basic 3 column layout, we don't want the column with the long link to squish the other 2 columns. We want the link text to wrap onto the next line. 1fr squishes the other 2 columns no matter what we do. minmax(0,1fr) will allow the link text to wrap and keeps all 3 columns equal.

[fantasai]

@Dan503 Right, and the problem right now is that when overflow is controlled in that manner, CSS still imposes a mininum. The goal of #2677 #1865 is to simply not do that. The point of auto is to do the right thing, and in the cases you mention, right now it's not.

[Dan503]

@fantasai I like the idea of fixing min-content so that it knows when overflow is being controlled. I thought changing min-content might be too dangerous at this point in time though.

If fixing min-content is the path forward, then overflow settings should also affect the value of min-content. See issue #2683

[fantasai]

Sorry, wrong issue reference - I meant #1865 which covers overflow.

[css-meeting-bot]

The Working Group just discussed Shortcut syntax for repeat(M, 1fr), and agreed to the following:

• RESOLVED: Close this issue, won't fix.

The full IRC log of that discussion

<dael> Topic: Shortcut syntax for repeat(M, 1fr)
<dael> github: https://github.com//issues/2270
<dael> leaverou: I found that I was using grid template columns and rows numbered by accident and realized that not how you make equal columns and I was wondering if we can add shortcut syntax so the error becomes correct b/c I suspect other people would write this.
<dael> leaverou: TabAtkins raised point that because we allow unitless lengths grid-template:0 has a meaning. It doesn't mean it's not possible, but it's confusing in that case.
<dael> leaverou: People have discussed a new unit, I don't remember names, but people discussed units or functions like efr. I'm not a huge fan because I wanted to prevent this error and other syntax would g et people to make errors. but I guess a shortcut for this is still a net gain
<dael> fantasai: My main concerns where that there's lots of sizing functions you can have and I'm not sure fr is what you always want
<dael> leaverou: My point was a shortcut to spec equal width columns. It can be a shortcut to whatever you think ti should be. You know grid better then me
<dael> TabAtkins: The point isn't one better, but it's that there isn't a single obvious choice. It's hard to justify one with a belssing of a shorthand
<dael> jensimmons: I'd hesitate to put a thumb on the scale for which syntax should be used by giving one approach a special short hand. I feel industry needs a couple years to come up with a bazillion ways to do things.
<dael> astearns: I wonder if we should let it sit, see if preprocessors come up with a shorthand of their own we can adopt
<dael> rachelandrew: Agree. I d on't see huge confusion. I see people that love shorthands, but I don't see this as a mistake. I see a lot of not working grid and thishasn't come up.
<dael> jensimmons: I see people trying to systematize and it's early for that. Theyd ont' understand power of grid and what a fr is. I think there's a long way to go before we create a system of shortcut.
<dael> astearns: Is there anything we can do about the mistake case?
<dael> fantasai: I think we leave ass invalid. We could revisit a shorthand in the future but I think for now it's not the right time.
<fantasai> https://github.com//issues/1865
<dael> fantasai: Related: one frustration raised in thread is w ay fr units are calc and people are frustrated you can't use direct because auto min is often wrong. We need to fix those cases. They have to set a 0 min. That's #1865. We need to do something about it.
<chris> s/ass/as
<dael> astearns: leaverou are you okay closing this for now and taking someof this over to 1865?
<dael> leaverou: Yep, fine. I was fine since TabAtkins pointed out grammar inconsistancy.
<dael> astearns: We'll leave it there and not do anything for hte moment. We'll see what people do with fr and make shorthands
<dael> RESOLVED: Close this issue, won't fix.

[FremyCompany]

Try this in chrome :D
https://wptest.center/#/gt8d00 -- cc @LeaVerou @tabatkins @mrego

[tabatkins]

...sigh. Mind filing a bug?

[mrego]

Bug reported at: https://bugs.chromium.org/p/chromium/issues/detail?id=848669

[FremyCompany]

I guess this is just an overzealous implementation of https://simon.html5.org/specs/quirks-mode#the-unitless-length-quirk