Ryfujk

How to type this arrow in math mode?

Earliest use of the term "Galois extension"?

What does Linus Torvalds mean when he says that Git "never ever" tracks a file?

Shouldn't "much" here be used instead of "more"?

How are circuits which use complex ICs normally simulated?

What to do when moving next to a bird sanctuary with a loosely-domesticated cat?

If a Druid sees an animal’s corpse, can they wild shape into that animal?

How to save as into a customized destination on macOS?

Why did Acorn's A3000 have red function keys?

Right tool to dig six foot holes?

How to answer pointed "are you quitting" questioning when I don't want them to suspect

Why do UK politicians seemingly ignore opinion polls on Brexit?

Does a dangling wire really electrocute me if I'm standing in water?

Are there any other methods to apply to solving simultaneous equations?

"as much details as you can remember"

Why didn't the Event Horizon Telescope team mention Sagittarius A*?

Did 3000BC Egyptians use meteoric iron weapons?

Can a rogue use sneak attack with weapons that have the thrown property even if they are not thrown?

Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?

What does ひと匙 mean in this manga and has it been used colloquially?

Apparent duplicates between Haynes service instructions and MOT

Deal with toxic manager when you can't quit

Which Sci-Fi work first showed weapon of galactic-scale mass destruction?

Is bread bad for ducks?

Lightning Grid - Columns and Rows?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}

3

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

share|improve this question

asked 2 hours ago

BobbygllhBobbygllh

386

add a comment | 

3

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

share|improve this question

asked 2 hours ago

BobbygllhBobbygllh

386

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

share|improve this question

asked 2 hours ago

BobbygllhBobbygllh

386

<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>

share|improve this question

asked 2 hours ago

BobbygllhBobbygllh

386

share|improve this question

asked 2 hours ago

BobbygllhBobbygllh

386

asked 2 hours ago

BobbygllhBobbygllh

386

asked 2 hours ago

BobbygllhBobbygllh

386

1 Answer
1

active

oldest

votes

2

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>

share|improve this answer

answered 1 hour 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
});


}
});

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

2

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>

share|improve this answer

answered 1 hour ago

sfdcfoxsfdcfox

264k13210457

add a comment | 

2

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>

share|improve this answer

answered 1 hour 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>

share|improve this answer

answered 1 hour ago

sfdcfoxsfdcfox

264k13210457

<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>

share|improve this answer

answered 1 hour ago

sfdcfoxsfdcfox

264k13210457

answered 1 hour ago

sfdcfoxsfdcfox

264k13210457

answered 1 hour ago

sfdcfoxsfdcfox

264k13210457