Grid: powerful css3 for creating a web layout
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.