Show HN: A CSS Grid generator for building layouts faster

layoutit.com

37 pointsrofko5 comments

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.

Reply on news.ycombinator.com