Re: [csswg-drafts] [css-grid] Shortcut syntax for repeat(M, 1fr)

I really like the idea of having a quick "create this many equal columns" unit. You can do stuff like this then:
````css
grid-template-columns: 20px 12rep 20px;
````
Which would be the equivalent of writing this:
````css
grid-template-columns: 20px repeat(12, minmax(0, 1fr)) 20px;
````

or maybe do something like this:
````css
grid-template-columns: 20px 3rep 100px 3rep 20px;
````
Equivalent to this:
````css
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:
````css
grid-template-columns: 20px [left-start] 3rep [left-end] 100px [right-start] 3rep [right-end] 20px;
````
Translation:
````css
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:
````css
grid-template-columns: 20px 12cols 20px;
grid-template-rows: 12rows;
````
Translation:
````css
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)

-- 
GitHub Notification of comment by Dan503
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2270#issuecomment-388316534 using your GitHub account

Received on Friday, 11 May 2018 09:46:51 UTC