SLDS grid ugly rendering with lightning:outputField

Question

I am trying to display a record using lightning:recordviewform and using slds grid inside it to format columns.

It looks like below when I am using slds-size_3_of_12

As you can see, there is still plenty of space left, and it doesn't auto-adjust. Also, it doesn't display label on top and field value below it, as I wanted.

But When I drag and make browser's window smaller, it looks perfect.

Like below,

Any Idea, why CSS overflows like this in fullsize browser window, and make standard component pretty much useless if I have many fields?

Any help will be highly appreciated.

Below is the relevant part of aura markup.

<lightning:layout multipleRows="true">
    <aura:iteration items="{! v.campaignLineItemsWrp }" var="lineItemWrp" indexVar="index">
        <lightning:layoutItem padding="around-small" size="12">
            <div id="tile" class="slds-box">
                <lightning:tile label="{!lineItemWrp.campaignLineItem.Name}">
                    <lightning:recordViewForm recordId="{!lineItemWrp.campaignLineItem.Name.Id}" objectApiName="Obj__c">
                        <div class="slds-grid slds-wrap slds-gutters slds-grid_align-space">
                            <div class="slds-col form-group slds-float_left slds-size_4-of-12">
                                <span>
                                    <lightning:outputField class="slds-form-element_stacked" fieldName="Name" />
                                </span>
                            </div>
                        </div>
                    </lightning:recordViewForm>
                </lightning:tile>
            </div>
        </lightning:layoutItem>
    </aura:iteration>
</lightning:layout>

Answer 1

Were you able to solve this?

I had a similar issue when trying to display the label on top and the value below, and I was able to solve it using the new attribute density for the lightning:recordViewForm by setting it as comfy.

Source: https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_aura_components.htm