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

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

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

Multiply Two Integer Polynomials

Did 3000BC Egyptians use meteoric iron weapons?

"as much details as you can remember"

Output the Arecibo Message

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

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

Identify boardgame from Big movie

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

Aging parents with no investments

How to deal with fear of taking dependencies

During Temple times, who can butcher a kosher animal?

Origin of "cooter" meaning "vagina"

What is the closest word meaning "respect for time / mindful"

How can I autofill dates in Excel excluding Sunday?

Is "plugging out" electronic devices an American expression?

What is the motivation for a law requiring 2 parties to consent for recording a conversation

Is there a symbol for a right arrow with a square in the middle?

Can someone be penalized for an "unlawful" act if no penalty is specified?

Why not take a picture of a closer black hole?

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

Can you compress metal and what would be the consequences?

Do these rules for Critical Successes and Critical Failures seem Fair?



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

      387




      387




















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

                    Are there any AGPL-style licences that require source code modifications to be public? 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?Force derivative works to be publicAre there any GPL like licenses for Apple App Store?Do you violate the GPL if you provide source code that cannot be compiled?GPL - is it distribution to use libraries in an appliance loaned to customers?Distributing App for free which uses GPL'ed codeModifications of server software under GPL, with web/CLI interfaceDoes using an AGPLv3-licensed library prevent me from dual-licensing my own source code?Can I publish only select code under GPLv3 from a private project?Is there published precedent regarding the scope of covered work that uses AGPL software?If MIT licensed code links to GPL licensed code what should be the license of the resulting binary program?If I use a public API endpoint that has its source code licensed under AGPL in my app, do I need to disclose my source?

                    2013 GY136 Descoberta | Órbita | Referências Menu de navegação«List Of Centaurs and Scattered-Disk Objects»«List of Known Trans-Neptunian Objects»

                    Mortes em março de 2019 Referências Menu de navegação«Zhores Alferov, Nobel de Física bielorrusso, morre aos 88 anos - Ciência»«Fallece Rafael Torija, o bispo emérito de Ciudad Real»«Peter Hurford dies at 88»«Keith Flint, vocalista do The Prodigy, morre aos 49 anos»«Luke Perry, ator de 'Barrados no baile' e 'Riverdale', morre aos 52 anos»«Former Rangers and Scotland captain Eric Caldow dies, aged 84»«Morreu, aos 61 anos, a antiga lenda do wrestling King Kong Bundy»«Fallece el actor y director teatral Abraham Stavans»«In Memoriam Guillaume Faye»«Sidney Sheinberg, a Force Behind Universal and Spielberg, Is Dead at 84»«Carmine Persico, Colombo Crime Family Boss, Is Dead at 85»«Dirigent Michael Gielen gestorben»«Ciclista tricampeã mundial e prata na Rio 2016 é encontrada morta em casa aos 23 anos»«Pagan Community Notes: Raven Grimassi dies, Indianapolis pop-up event cancelled, Circle Sanctuary announces new podcast, and more!»«Hal Blaine, Wrecking Crew Drummer, Dies at 90»«Morre Coutinho, que editou dupla lendária com Pelé no Santos»«Cantor Demétrius, ídolo da Jovem Guarda, morre em SP»«Ex-presidente do Vasco, Eurico Miranda morre no Rio de Janeiro»«Bronze no Mundial de basquete de 1971, Laís Elena morre aos 76 anos»«Diretor de Corridas da F1, Charlie Whiting morre aos 66 anos às vésperas do GP da Austrália»«Morreu o cardeal Danneels, da Bélgica»«Morreu o cartoonista Augusto Cid»«Morreu a atriz Maria Isabel de Lizandra, de "Vale Tudo" e novelas da Tupi»«WS Merwin, prize-winning poet of nature, dies at 91»«Atriz Márcia Real morre em São Paulo aos 88 anos»«Mauritanie: décès de l'ancien président Mohamed Mahmoud ould Louly»«Morreu Dick Dale, o rei da surf guitar e de "Pulp Fiction"»«Falleció Víctor Genes»«João Carlos Marinho, autor de 'O Gênio do Crime', morre em SP»«Legendary Horror Director and SFX Artist John Carl Buechler Dies at 66»«Morre em Salvador a religiosa Makota Valdina»«مرگ بازیکن‌ سابق نساجی بر اثر سقوط سنگ در مازندران»«Domingos Oliveira morre no Rio»«Morre Airton Ravagniani, ex-São Paulo, Fla, Vasco, Grêmio e Sport - Notícias»«Morre o escritor Flavio Moreira da Costa»«Larry Cohen, Writer-Director of 'It's Alive' and 'Hell Up in Harlem,' Dies at 77»«Scott Walker, experimental singer-songwriter, dead at 76»«Joseph Pilato, Day of the Dead Star and Horror Favorite, Dies at 70»«Sheffield United set to pay tribute to legendary goalkeeper Ted Burgin who has died at 91»«Morre Rafael Henzel, sobrevivente de acidente aéreo da Chapecoense»«Morre Valery Bykovsky, um dos primeiros cosmonautas da União Soviética»«Agnès Varda, cineasta da Nouvelle Vague, morre aos 90 anos»«Agnès Varda, cineasta francesa, morre aos 90 anos»«Tania Mallet, James Bond Actress and Helen Mirren's Cousin, Dies at 77»e