How to display fieldset fields in a 2 column fashion with Lightning DS?

Question

I'm trying to use LDS to display some fields in a VF page. Most sections in this page display the data with 2 fields per row with its label like the pageBlockSection tags do. This page was a regular VF page and I tweaked it to use LDS. Pretty much everything is fine except for a few sections. Those sections data is shown iterating a fieldset. To mantain the 2 column layout I used pageBlock and pageBlockSection with columns set to 2. However those tags create divs that don't take the full container div's width when the window size changes. And since it's a fieldset, it's iterated with an apex:repeat tag, so using panelGrid is not an option since per the documentation:

Note that if an apex:repeat component is used within an component, all content generated by the apex:repeat component is placed in a single cell

Right now the divs with the problem look like this:

<apex:variable var="fieldlabel"
    value="slds-col--padded slds-text-align--right" />
<apex:variable var="fieldsrow"
    value="slds-grid slds-container--fluid slds-m-top--x-small" />
<apex:variable var="titlestyle"
    value="slds-media__body slds-truncate slds-box slds-box--small slds-theme--info slds-text-heading--small" />

<div class="slds-card">
    <div class="slds-card__header slds-grid">
        <div class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="{! titlestyle }">{! $Label.LBL_008 }</div>
        </div>
    </div>
    <div class="slds-card__body slds-grid">
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <apex:repeat value="{! $ObjectType.Contact.FieldSets.DatosBasicos }" var="f">
                    <div class="{! fieldsrow } slds-size--4-of-4">
                        <div class="{! fieldlabel } slds-size--2-of-4">
                            <strong>{! f.Label }</strong>
                        </div>
                        <div class="slds-col--padded slds-size--2-of-4">{!
                            contact[f] }</div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>
</div>

How can I display my fieldsets with two fields per row, as in regular detail pages but with the Lightning Design System styles?

Answer 1

What about combining the slds compound form with the pageBlockSection something like:

    <fieldset class="slds-form--compound slds-form--compound--horizontal">
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <legend class="slds-form-element__label slds-text-title--caps">{! $Label.LBL_008 }</legend>
                <apex:repeat value="{! $ObjectType.Contact.FieldSets.DatosBasicos }" var="f">
                    <div class="form-element__group">
                        <div class="slds-form-element__row slds-m-top--x-small">
                            <label class="slds-form-element__label slds-size--1-of-4 slds-col--padded slds-text-align--right" for="field">{! f.Label }</label>
                            <div class="slds-form-element slds-size--1-of-4" id="field"> {!contact[f] } </div>
                        </div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </fieldset>