W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

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

From: Lea Verou via GitHub <sysbot+gh@w3.org>
Date: Sat, 03 Feb 2018 23:09:38 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-294153154-1517699377-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:24 UTC