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

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Shortcut syntax for repeat(M, 1fr) ==
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:

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

or in one direction:

```css
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:

```css
grid-template: M / N;
```

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

```css
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2270 using your GitHub account

Received on Saturday, 3 February 2018 23:09:40 UTC