[csswg-drafts] [css-grid] grid area as element (#4416)

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

== [css-grid] grid area as element ==
I love the idea of grid areas to place items. They reduce the need for layout wrapper elements that have no semantic meaning. However, I still require wrapper elements for nested layouts, e.g. a dynamic flex layout inside a grid cell. 

I would love to be able to target a grid area and use and style it just like a wrapper element. I don't know if this is feasible at all, but this would (in most cases) completely eliminate the need for any layout wrapper elements.

As an example markup:

```
<div class="grid">
  <div class="header">...</div>
  <div class="menu">...</div>
  <div class="footer">...</div>
  <div class="content">...</div>
  <div class="content">...</div>
  <div class="content">...</div>
  <div class="content">...</div>
</div>
```

The css:

```
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header  content'
    'menu    content'
    'footer  content';
}

.grid[area='content'] {
  display: flex;
  flex-wrap: wrap;
  outline: 1px solid black;
}

.header {
  grid-area: header
}

.menu {
  grid-area: menu
}

.content {
  grid-area: content
}

.footer {
  grid-area: footer
}
```

As a result, the DOM structure is completely flattened and only contains actual content. The css completely controls the layout, including the nested dynamic flow of the `.content` items. 

Using the (suggested) accessor `.grid[area='content']`, the items within this area are placed using a flex flow and wrapped when needed. It would then also be possible to style the area even further as shown with the black border.

Again, I do not know if this even technically possible with the current implementation of grid, but, to me, this looks like the missing link to combine the power of `grid` and `flexbox`.

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

Received on Saturday, 12 October 2019 13:12:18 UTC