7 comments

[ 5.1 ms ] story [ 19.3 ms ] thread
The css grid code this produces is pretty poor in my opinion. I thought it was going to use the names to define the area templates, which it did not. It uses an attribute and then defines the grids in a long-winded way. Yeah. I'll pass.
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.
Very handy and helpful resource. The grid code it produces is clean, clear, and provides me a great starting point to build upon. Good work here.