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.

No Comments Yet