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.