Use css grid to layout form

Is your feature request related to a problem? Please describe. Current react-layout use Section and Box to align component, which is flexible. But I feel it is not Intuitive，specially Box nested Box in source code.

Describe the solution you’d like Css grid is modern layout, which is intuitive and powerful. Specially grid-area is suit to layout form.

Describe alternatives you’ve considered For example, we can define form layout like this:

// CSS
.container {
  grid-template-areas: 
    "name    name    age age"      // <<---------- define component occupy which cell, can span rows or cols
    "phone   phone   "                   //
}
.name {
  grid-area: name;
}
.age {
  grid-area: age;
}
.phone {
 grid-area: phone;
}

// JS
<Field id="name" className="name" />
<Field id="age" className="age" />
<Field id="phone" className="phone" />
...

Changing grid-template-areas will change layout. Grid-template-areas string is just like EXCEL, can span cols and rows, is very flexible.

[galhavivi]

pr - https://github.com/yahoo/jafar/pull/65 demo - https://yahoo.github.io/jafar/demo-react-layout.html#/item/sections-grid/html

available on v1.0.7

[galhavivi]

done 😃 i was slow here lol