Make slds-grid with 6 exactly equally square sizes (2 Rows & 3 Columns) & acquire all space

Question

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.

Answer 1

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>

Answer 2

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