Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SLDS Grid vs. Lightning Layout
<aura:application extends="force:slds">
<!-- Pure HTML and SLDS Grid -->
<div class="slds-text-heading--large slds-p-around--small">Pure HTML and SLDS Grid</div>
<div class="slds-grid slds-wrap">
<div class="slds-p-around--small slds-size--1-of-1">1</div>
<div class="slds-p-around--small slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12">2</div>
<div class="slds-p-around--small slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12">3</div>
<div class="slds-p-around--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">4</div>
<div class="slds-p-around--small slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">5</div>
<div class="slds-size--1-of-1 slds-large-size--1-of-3">
<div class="slds-grid slds-wrap">
<div class="slds-p-around--small slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">6</div>
<div class="slds-p-around--small slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">7</div>
</div>
</div>
</div>
<!-- Lightning Layout and LayoutItem Components -->
<div class="slds-text-heading--large slds-p-around--small slds-m-top--large">Lightning Layout and LayoutItem Components</div>
<lightning:layout horizontalAlign="spread" multipleRows="true">
<lightning:layoutItem padding="around-small" flexibility="grow" size="12">1</lightning:layoutItem>
<lightning:layoutItem padding="around-small" flexibility="grow" size="8" mediumDeviceSize="10" largeDeviceSize="8">2</lightning:layoutItem>
<lightning:layoutItem padding="around-small" flexibility="grow" size="4" mediumDeviceSize="2" largeDeviceSize="4">3</lightning:layoutItem>
<lightning:layoutItem padding="around-small" flexibility="grow" size="4" mediumDeviceSize="6" largeDeviceSize="4">4</lightning:layoutItem>
<lightning:layoutItem padding="around-small" flexibility="grow" size="4" mediumDeviceSize="6" largeDeviceSize="4">5</lightning:layoutItem>
<lightning:layoutItem flexibility="grow" size="12" largeDeviceSize="4">
<lightning:layout horizontalAlign="spread" multipleRows="true">
<lightning:layoutItem padding="around-small" flexibility="grow" size="6" mediumDeviceSize="12" largeDeviceSize="6">6</lightning:layoutItem>
<lightning:layoutItem padding="around-small" flexibility="grow" size="6" mediumDeviceSize="12" largeDeviceSize="6">7</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</aura:application>
.THIS div {
border:1px solid red;
}
@pozil

This comment has been minimized.

Copy link
Owner Author

@pozil pozil commented Apr 12, 2017

Do not forget to add the CSS file or you will not be able to see the responsive content.

@mlkayser

This comment has been minimized.

Copy link

@mlkayser mlkayser commented May 8, 2018

Thank you for making this available, it helps a lot!

@rapsacnz

This comment has been minimized.

Copy link

@rapsacnz rapsacnz commented Dec 12, 2019

What's the point of using lightning layout when I still need to know how slds-grid works - it contains more markup and is basically the inner platform anti-pattern https://en.wikipedia.org/wiki/Inner-platform_effect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment