Thank you! We'll work on those those UI bugs, the nested grids are a challenge.

The code produces a standard way of defining grid-areas with line numbers, there is nothing poor or long winded about that. You can build grids in many ways.

Using a data-attribute is useful when you have overlapping areas, as one cell can't have two names at the same time. It is also essential for naming grid areas support in IE10+.

That being said, we will definitely add naming areas with grid-template-areas in a future version, alongside naming grid lines, which is also very useful for these layouts.

Using 'data-area' requires modifying the html so it is not a css only approach. This is a fairly big turn off for me.

You can use any selector to apply the grid, that data-area can be replaced with a class you already have.