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

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

Why do UK politicians seemingly ignore opinion polls on Brexit?

Can we generate random numbers using irrational numbers like π and e?

Why do we hear so much about the Trump administration deciding to impose and then remove tariffs?

Geography at the pixel level

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

Why did Acorn's A3000 have red function keys?

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

What does "fetching by region is not available for SAM files" means?

Worn-tile Scrabble

Apparent duplicates between Haynes service instructions and MOT

A poker game description that does not feel gimmicky

When should I buy a clipper card after flying to OAK?

Where to refill my bottle in India?

What is the meaning of Triage in Cybersec world?

Right tool to dig six foot holes?

Why was M87 targetted for the Event Horizon Telescope instead of Sagittarius A*?

For what reasons would an animal species NOT cross a *horizontal* land bridge?

Is a "Democratic" Oligarchy-Style System Possible?

Is "plugging out" electronic devices an American expression?

Is an up-to-date browser secure on an out-of-date OS?

Multiply Two Integer Polynomials

How to type this arrow in math mode?

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



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

                    Oświęcim Innehåll Historia | Källor | Externa länkar | Navigeringsmeny50°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.2213950°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.221393089658Nordisk familjebok, AuschwitzInsidan tro och existensJewish Community i OświęcimAuschwitz Jewish Center: MuseumAuschwitz Jewish Center

                    Valle di Casies Indice Geografia fisica | Origini del nome | Storia | Società | Amministrazione | Sport | Note | Bibliografia | Voci correlate | Altri progetti | Collegamenti esterni | Menu di navigazione46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)Sito istituzionaleAstat Censimento della popolazione 2011 - Determinazione della consistenza dei tre gruppi linguistici della Provincia Autonoma di Bolzano-Alto Adige - giugno 2012Numeri e fattiValle di CasiesDato IstatTabella dei gradi/giorno dei Comuni italiani raggruppati per Regione e Provincia26 agosto 1993, n. 412Heraldry of the World: GsiesStatistiche I.StatValCasies.comWikimedia CommonsWikimedia CommonsValle di CasiesSito ufficialeValle di CasiesMM14870458910042978-6

                    Typsetting diagram chases (with TikZ?) Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)How to define the default vertical distance between nodes?Draw edge on arcNumerical conditional within tikz keys?TikZ: Drawing an arc from an intersection to an intersectionDrawing rectilinear curves in Tikz, aka an Etch-a-Sketch drawingLine up nested tikz enviroments or how to get rid of themHow to place nodes in an absolute coordinate system in tikzCommutative diagram with curve connecting between nodesTikz with standalone: pinning tikz coordinates to page cmDrawing a Decision Diagram with Tikz and layout manager