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

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.

Best Answer

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>
Related Topic