How to use field sets in a lightning component to create a multi-grid structure form with a lightning look and feel?

Question

I am trying to create a lightning component that would render a form based on a picklist selection. I read this post below and was able to kick start my development

How to use fieldsets with Lightning?

It was a great sample to start what I am trying to do. However, what I found here is that every field is being created as a separate row and being pushed on the front end. What if I want to accommodate more than 1 field in one row and wrap them in aura specific markups like <fieldset> and assign lightning style classes to the entire markup to align it more with the lightning look and feel? Is there a possible way of doing it?

I am talking of a markup like below.

<div aura:id="form" class="slds">
<div class="slds-box slds-theme--shade">
    <fieldset class="slds-form--compound">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="CT">Field 1</label>
            <input class="slds-input" type="text"/>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CDF">Field 2</label>
                    <input class="slds-input" type="date"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CDT">Field 3</label>
                    <input class="slds-input" type="date"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CS">Field 4</label>
                    <input class="slds-input" type="text"/>
                </div> 
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="MNOD">Field 5</label>
                    <input class="slds-input" type="number"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="Mat">Field 6</label>
                    <input class="slds-input" type="text"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="Cer">Field 7</label>
                    <input class="slds-input" type="text"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="ID">Field 8</label>
            <input class="slds-input" type="text"/>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="NODD">Field 9</label>
                    <input class="slds-input" type="number"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="NODsD">Field 10</label>
                    <input class="slds-input" type="number"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="slds-form-element">
            <div class="slds-align--absolute-center">
                <ui:button class="slds-button slds-button--neutral slds-button--brand" label="Submit" />
                <ui:button class="slds-button slds-button--neutral" label="Cancel" />
            </div>
        </div>
    </fieldset>
</div>

I want to display my field set in this type of a wrapping which allows me to give it a standard lightning look and feel.

Answer 1

There are two different ways to approach this, depending on your use case for your implementation <fieldset> on your page.

Multiple FieldSets: If you are using <fieldset> to define logical groups of inputs, you may wish to use different FieldSets on the object (one per each <fieldset> in your page). This allows flexibility to define specific fields to include in each section, and would mimic the "section" concept on a standard page layout.

Split a Single FieldSet: When your Lightning Component initializes, you may break apart the FieldSet into separate arrays based on a fixed number of fields you wish to display in a <fieldset>. I wouldn't recommend this approach though, preferring the use of the slds-grid classes and the ability to define layout based on the --size-1-of-N notation.

It'd be great to know what you did if you already have implemented this, too!