Recently I have a business requirement:
<ul>
<li>Have a template (a template is an array of fields, each field defines: type, min-length, max-length, ...). From the template, we need to render in another page for the user to submit the form.</li>
<li>Template can show, hide, add new custom fields. With each field admin also can change the property of fields.</li>
<li>Each field display in form have different width (custom fields will have the same width)</li>
<li>Also responsive in mobile</li>
</ul>
My solution is to use Grid to layout the form from the template.
I define grid with 12 column <code>grid-template-columns: reapt(12, 1fr);</code>
For each field, I allow it some space like: <code>grid-column: span 2;</code>
For responsive, I base on media query and change <code>span</code> of fields.

Recently I have a business requirement:
- Have a template (a template is an array of fields, each field defines: type, min-length, max-length, ...). From the template, we need to render in another page for the user to submit the form.
- Template can show, hide, add new custom fields. With each field admin also can change the property of fields.
- Each field display in form have different width (custom fields will have the same width)
- Also responsive in mobile

My solution is to use Grid to layout the form from the template.
I define grid with 12 column `grid-template-columns: reapt(12, 1fr);`
For each field, I allow it some space like: `grid-column: span 2;`

For responsive, I base on media query and change `span` of fields.


Grid: powerful css3 for creating a web layout