Lightning Grid - Columns and Rows? The 2019 Stack Overflow Developer Survey Results Are...
Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?
Resizing object distorts it (Illustrator CC 2018)
What are the motivations for publishing new editions of an existing textbook, beyond new discoveries in a field?
Multiply Two Integer Polynomials
Time travel alters history but people keep saying nothing's changed
Why is the maximum length of OpenWrt’s root password 8 characters?
Where to refill my bottle in India?
The difference between dialogue marks
Pokemon Turn Based battle (Python)
Apparent duplicates between Haynes service instructions and MOT
During Temple times, who can butcher a kosher animal?
When should I buy a clipper card after flying to OAK?
A poker game description that does not feel gimmicky
Why do we hear so much about the Trump administration deciding to impose and then remove tariffs?
Shouldn't "much" here be used instead of "more"?
How to save as into a customized destination on macOS?
Is flight data recorder erased after every flight?
Why can Shazam fly?
Is bread bad for ducks?
Why isn't airport relocation done gradually?
What did it mean to "align" a radio?
How can I autofill dates in Excel excluding Sunday?
Delete all lines which don't have n characters before delimiter
What is the meaning of the verb "bear" in this context?
Lightning Grid - Columns and Rows?
The 2019 Stack Overflow Developer Survey Results Are InDynamically 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
asked 2 hours ago
BobbygllhBobbygllh
387
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
asked 2 hours ago
BobbygllhBobbygllh
387
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
asked 2 hours ago
BobbygllhBobbygllh
387
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 2 hours ago
BobbygllhBobbygllh
387
asked 2 hours ago
BobbygllhBobbygllh
387
asked 2 hours ago
BobbygllhBobbygllh
387
asked 2 hours ago
BobbygllhBobbygllh
387
asked 2 hours ago
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>
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
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>
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
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>
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
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>
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
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 2 hours ago
sfdcfoxsfdcfox
264k13210457
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
answered 2 hours ago
sfdcfoxsfdcfox
264k13210457
264k13210457
add a comment |
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
