[csswg-drafts] [css-grid] Allow naming grid rows and columns and allow a grid item to span named grid areas/rows/columns... (#4892)

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

== [css-grid] Allow naming grid rows and columns and allow a grid item to span named grid areas/rows/columns... ==
I would love to be able to place a grid item across multiple named grid areas, and to also name grid-rows and columns and place items across multiple ones of those as well.

It would be really nice to be able to name grid-areas, like so:

```css
grid-template-areas:
"A1     A2     A3     A4     A5"
"B1     B2     B3     B4     B5"
"C1     C2     C3     C4     C5"
```

...then I could place an item like so:

```css
gird-area: B2 / C4;
```

...and this would place the item in B2, B3, B4 and also C2, C3 and C4.

This would be amazing for building something like a musical note sequencer where one could define a `midi note name` and `musical timing` grid like so:

```css
grid-template-areas:
"D1-1.1     D1-1.2     D1-1.3     D1-1.4     D1-2.1     D1-2.2     D1-2.3     D1-2.4"
"C#1-1.1    C#1-1.2    C#1-1.3    C#1-1.4    C#1-2.1    C#1-2.2    C#1-2.3    C#1-2.4"
"C1-1.1     C1-1.2     C1-1.3     C1-1.4     C1-2.1     C1-2.2     C1-2.3     C1-2.4"
```

...and then place a note across multiple named grid areas. like so:

```css
grid-area: C1-1.2 / C1-2.1;
```

Or better yet, simple name rows and columns, like so:

```css
grid-template-columns: 1fr('1.1') 1fr('1.2') 1fr('1.3') 1fr('1.4') 1fr('2.1') 1fr('2.2') 1fr('2.3') 1fr('2.4')";
grid-template-rows:
"
1fr('D#/Eb1')
1fr('D1')
1fr('C#/Db1')
1fr('C1')
"
```

...then one could place an item using both and spanning multiple of each one, like so:

```css
grid-row: 'C1';
grid-column: '1.1' / '1.3';
```

...or something along those lines. This could be really nice for these kinds of use-cases where one wants to place an item on an intricate grid in a very precise way without having to count every line and make sure the lines are right. I could imagine a scenario where the grid has hundreds of columns and over a hundred rows...I really don't want to have to figure out where:

```css
grid-column: 134 / 146;
```

...is on that grid! ahhhh!

Anyway, just dropping these questions/ideas off for now...will come back and work on them more later if the general concept is well received :-)

Thank you! XD

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

Received on Saturday, 21 March 2020 03:31:18 UTC