Create a gist now

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.

Show comment
Hide comment
@pozil

pozil Apr 12, 2017

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

Owner

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.

Show comment
Hide comment
@mlkayser

mlkayser May 8, 2018

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

mlkayser commented May 8, 2018

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

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