Lightning Grid - Columns and Rows? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 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
What do I do if technical issues prevent me from filing my return on time?
Stars Make Stars
I'm thinking of a number
Estimate capacitor parameters
How can you insert a "times/divide" symbol similar to the "plus/minus" (±) one?
Mortgage adviser recommends a longer term than necessary combined with overpayments
Windows 10: How to Lock (not sleep) laptop on lid close?
How to rotate it perfectly?
How to politely respond to generic emails requesting a PhD/job in my lab? Without wasting too much time
Can smartphones with the same camera sensor have different image quality?
How is simplicity better than precision and clarity in prose?
Active filter with series inductor and resistor - do these exist?
Why is there no army of Iron-Mans in the MCU?
Can the prologue be the backstory of your main character?
How do you clear the ApexPages.getMessages() collection in a test?
Can I throw a longsword at someone?
If A makes B more likely then B makes A more likely"
What would be Julian Assange's expected punishment, on the current English criminal law?
Fishing simulator
Complexity of many constant time steps with occasional logarithmic steps
What did Darwin mean by 'squib' here?
Is it possible to ask for a hotel room without minibar/extra services?
Simulating Exploding Dice
Is there a service that would inform me whenever a new direct route is scheduled from a given airport?
Lightning Grid - Columns and Rows?
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 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
265k13211458
265k13211458
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