0

grid I am currently working on Building a Lightning Component, i am facing issue of size of each grid when i put layout in it there sizes are changed, all i want exactly same square sizes of 6 grid with 2 rows & 3 column in it. No matter how much i put layouts in it, it doesn't change it's size. Please help me in this. i searched a lot but haven't found anything which help me in it's Height, i am able to manage its width using

"slds-col slds-size--1-of-1 slds-large-size_4-of-12"

for column width but it doesn't acquire it's height and there is lot's of space remaining at the bottom which i don't want.

0

Refer SLDS for inline class. Here's a quick n dirty solution:

<ul class="slds-list_horizontal slds-has-inline-block-links">
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:aqua;">1</li>
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:blue;">2</li>
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:green;">3</li>
</ul>
<ul class="slds-list_horizontal slds-has-inline-block-links">
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:grey;">4</li>
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:red;">5</li>
    <li class="slds-col slds-size--1-of-1 slds-large-size_4-of-12" style="background-color:yellow;">6</li>
</ul>
  • No, they are not looking square and not acquiring whole space, i want exact square and acquire whole space by them. How arrange height of each <li/> ? – ULHAS PATIL Nov 1 '19 at 13:20
0

Try using the SLDS grid:

<div class="wrapper">
    <ul class="slds-grid slds-grid_align-left slds-wrap slds-grid_vertical-stretch">
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:aqua;">1</li>
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:blue;">2</li>
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:green;">3</li>
    </ul>
    <ul class="slds-grid slds-grid_align-left slds-wrap slds-grid_vertical-stretch">
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:grey;">4</li>
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:red;">5</li>
        <li class="slds-col slds-size--1-of-1 slds-small-size_4-of-12" style="background-color:yellow;">6</li>
    </ul>
</div>

And then in your CSS, set the height of the lists:

ul.slds-grid {
    height: 30vw;
    width: 90vw;
}

Playground here: https://developer.salesforce.com/docs/component-library/tools/playground/FcicGHN9/7/edit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.