Lightning Grid - Columns and Rows? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) 2019 Moderator Election Q&A - Questionnaire 2019 Community Moderator Election ResultsDynamically add and remove rows in lightningLightning data grid break pointsLightning Component - Grid Sizing - Narrow (right) side of Lightning pageLightning is showing unnecessary blue border around slds-grid elementsAligning table rows and columns in two different componentsDisable Checkbox for Parent rows in Lightning Tree GridSLDS Grid Columns Not the Same WidthInvoke Object Quick Action from Enhanced Lightning GridSyntax for Filter on enhanced lighning gridSpace between columns in a grid - not symmetric
How does light 'choose' between wave and particle behaviour?
Can the Great Weapon Master feat's damage bonus and accuracy penalty apply to attacks from the Spiritual Weapon spell?
How to react to hostile behavior from a senior developer?
How come Sam didn't become Lord of Horn Hill?
Effects on objects due to a brief relocation of massive amounts of mass
Time to Settle Down!
Dating a Former Employee
Is it possible for SQL statements to execute concurrently within a single session in SQL Server?
Is CEO the "profession" with the most psychopaths?
Is it a good idea to use CNN to classify 1D signal?
Why do early math courses focus on the cross sections of a cone and not on other 3D objects?
How to tell that you are a giant?
Why is Nikon 1.4g better when Nikon 1.8g is sharper?
Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode
As a beginner, should I get a Squier Strat with a SSS config or a HSS?
Why is it faster to reheat something than it is to cook it?
Illegal assignment from sObject to Id
Should I use a zero-interest credit card for a large one-time purchase?
Project Euler #1 in C++
How to write this math term? with cases it isn't working
What is the difference between globalisation and imperialism?
When a candle burns, why does the top of wick glow if bottom of flame is hottest?
Drawing without replacement: why is the order of draw irrelevant?
Why does the remaining Rebel fleet at the end of Rogue One seem dramatically larger than the one in A New Hope?
Lightning Grid - Columns and Rows?
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
2019 Moderator Election Q&A - Questionnaire
2019 Community Moderator Election ResultsDynamically add and remove rows in lightningLightning data grid break pointsLightning Component - Grid Sizing - Narrow (right) side of Lightning pageLightning is showing unnecessary blue border around slds-grid elementsAligning table rows and columns in two different componentsDisable Checkbox for Parent rows in Lightning Tree GridSLDS Grid Columns Not the Same WidthInvoke Object Quick Action from Enhanced Lightning GridSyntax for Filter on enhanced lighning gridSpace between columns in a grid - not symmetric
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column1
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column2
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column3
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
!v.column4
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
add a comment |
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column1
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column2
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column3
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
!v.column4
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
add a comment |
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column1
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column2
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column3
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
!v.column4
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
Looking to create this type of Grid in Lightning Grid. However what currently happens is C and D get pushed below item B (which is a chatter feed so it is long)
Current Component (mine is more set up with C/D switched with A, but i think the concept remains the same)
<aura:component implements="lightning:homeTemplate"
description="A home page you always dreamed of, 3 columns." >
<aura:attribute name="column1" type="Aura.Component[]" />
<aura:attribute name="column2" type="Aura.Component[]" />
<aura:attribute name="column3" type="Aura.Component[]" />
<aura:attribute name="column4" type="Aura.Component[]" />
<div>
<lightning:layout horizontalAlign="spread" pullToBoundary="small"
multipleRows="true">
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column1
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column2
</lightning:layoutItem>
<lightning:layoutItem size="4" flexibility="grow"
padding="around-small">
!v.column3
</lightning:layoutItem>
</lightning:layout>
<lightning:layoutItem size="8" flexibility="grow"
padding="around-small">
!v.column4
</lightning:layoutItem>
</div>
</aura:component>
Any ideas on how to create this with Lightning Grid?
lightning-aura-components lightning page-layout enhanced-lightning-grid
lightning-aura-components lightning page-layout enhanced-lightning-grid
asked Apr 10 at 23:01
BobbygllhBobbygllh
387
387
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f257408%2flightning-grid-columns-and-rows%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
add a comment |
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
add a comment |
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
SLDS doesn't have a provision for multi-row cells. However, you can do this with a combination of nested grids:
<aura:application extends="force:slds">
<lightning:layout>
<lightning:layoutItem size="8">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
Section A
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section C
</lightning:layoutItem>
<lightning:layoutItem size="6">
Section D
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="4">
Section B
</lightning:layoutItem>
</lightning:layout>
</aura:application>
answered Apr 10 at 23:10
sfdcfoxsfdcfox
266k13212459
266k13212459
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
add a comment |
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
Worked great, thanks
– Bobbygllh
Apr 11 at 20:03
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f257408%2flightning-grid-columns-and-rows%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown