[csswg-drafts] [css-grid] Introducing overlapping cells in grid-template-areas syntax

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

== [css-grid] Introducing overlapping cells in grid-template-areas syntax ==
Proposed update to CSS Grid spec grid-template-areas: https://www.w3.org/TR/css-grid-1/#grid-area-concept

I was recently working on an example showcasing the power of Grid to overlap cells on the grid and I decided grid-template-areas was the proper property to simplify my media queries in the future. I realized there wasn't syntax to handle this in areas and that I'd need to use all Named Lines or a mix of grid-template-areas and named lines to accomplish what I was looking for.

### Current working code:
```
.promo {
    grid-template-columns: [image-start] 1fr [image-end];
    grid-template-rows: [image-start] 10vh auto auto auto 10vh [image-end];
    grid-template-areas: '....'
                                        'headline'
                                        'text'
                                        'button'
                                        '....';
}

@media (min-width: 1024px) {
    .promo {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: '........       image'
                                            'headline image'
                                            'text         image'
                                            'button    image'
                                            '.......        image';
    }
}    

```

This allowed me the simple media query I wanted, but put my code into two different layout methods for creating my areas.

I'm proposing an update to the syntax of grid-template-areas to allow for multiple named areas to exist in the same template area:

### Proposed updated syntax
```
.promo {
    grid-template-columns: 1fr;
    grid-template-rows: 10vh auto auto auto 10vh;
    grid-template-areas: '...[image]'
                                       '[headline][image]'
                                       '[text][image]'
                                       '[button][image]'
                                       '...[image]';
  
}
```

This is a relatively simple use-case, but I could see other more complex layouts at different viewport sizes working well for this, as well. Full use-case example can be seen here: https://codepen.io/brob/pen/dKWdVB?editors=1100


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

Received on Friday, 22 June 2018 18:04:55 UTC