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?