Lightning Grid - Columns and Rows? The 2019 Stack Overflow Developer Survey Results Are...

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?



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







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)



What I want



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?










share|improve this question





























    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)



    What I want



    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?










    share|improve this question

























      3












      3








      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)



      What I want



      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?










      share|improve this question














      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)



      What I want



      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













      share|improve this question











      share|improve this question




      share|improve this question










      asked 2 hours ago









      BobbygllhBobbygllh

      386




      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
























            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


















            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









            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




























              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


























                2












                2








                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













                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












                share|improve this answer



                share|improve this answer










                answered 1 hour ago









                sfdcfoxsfdcfox

                264k13210457




                264k13210457






























                    draft saved

                    draft discarded




















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    As a Security Precaution, the user account has been locked The Next CEO of Stack OverflowMS...

                    Список ссавців Італії Природоохоронні статуси | Список |...

                    Українські прізвища Зміст Історичні відомості |...