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

Geography at the pixel level

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

Who coined the term "madman theory"?

If I score a critical hit on an 18 or higher, what are my chances of getting a critical hit if I roll 3d20?

Why did Acorn's A3000 have red function keys?

Time travel alters history but people keep saying nothing's changed

Is flight data recorder erased after every flight?

What do hard-Brexiteers want with respect to the Irish border?

Is a "Democratic" Oligarchy-Style System Possible?

Lightning Grid - Columns and Rows?

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

Did Scotland spend $250,000 for the slogan "Welcome to Scotland"?

FPGA - DIY Programming

How to manage monthly salary

Is bread bad for ducks?

How are circuits which use complex ICs normally simulated?

Write faster on AT24C32

Why is the maximum length of OpenWrt’s root password 8 characters?

How technical should a Scrum Master be to effectively remove impediments?

Resizing object distorts it (Illustrator CC 2018)

Apparent duplicates between Haynes service instructions and MOT

How to deal with fear of taking dependencies

Can a flute soloist sit?

Return to UK after being refused entry years previously



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

                    Disable / Remove link to Product Items in Cart Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?How can I limit products that can be bought / added to cart?Remove item from cartHide “Add to Cart” button if specific products are already in cart“Prettifying” the custom options in cart pageCreate link in cart sidebar to view all added items After limit reachedLink products together in checkout/cartHow to Get product from cart and add it againHide action-edit on cart page if simple productRemoving Cart items - ObserverRemove wishlist items when added to cart

                    Helsingin valtaus Sisällysluettelo Taustaa | Yleistä sotatoimista | Osapuolet | Taistelut Helsingin ympäristössä | Punaisten antautumissuunnitelma | Taistelujen kulku Helsingissä | Valtauksen jälkeen | Tappiot | Muistaminen | Kirjallisuutta | Lähteet | Aiheesta muualla | NavigointivalikkoTeoksen verkkoversioTeoksen verkkoversioGoogle BooksSisällissota Helsingissä päättyi tasan 95 vuotta sittenSaksalaisten ylivoima jyräsi punaisen HelsinginSuomalaiset kuvaavat sotien jälkiä kaupungeissa – katso kuvat ja tarinat tutuilta kulmiltaHelsingin valtaus 90 vuotta sittenSaksalaiset valtasivat HelsinginHyökkäys HelsinkiinHelsingin valtaus 12.–13.4. 1918Saksalaiset käyttivät ihmiskilpiä Helsingin valtauksessa 1918Teoksen verkkoversioTeoksen verkkoversioSaksalaiset hyökkäävät Etelä-SuomeenTaistelut LeppävaarassaSotilaat ja taistelutLeppävaara 1918 huhtikuussa. KapinatarinaHelsingin taistelut 1918Saksalaisten voitonparaati HelsingissäHelsingin valtausta juhlittiinSaksalaisten Helsinki vuonna 1918Helsingin taistelussa kaatuneet valkokaartilaisetHelsinkiin haudatut taisteluissa kaatuneet punaiset12.4.1918 Helsingin valtauksessa saksalaiset apujoukot vapauttavat kaupunginVapaussodan muistomerkkejä Helsingissä ja pääkaupunkiseudullaCrescendo / Vuoden 1918 Kansalaissodan uhrien muistomerkkim

                    Adjektiivitarina Tarinan tekeminen | Esimerkki: ennen | Esimerkki: jälkeen | Navigointivalikko