0

I'm looking to use a 3 col wrapped slds-grid layout when on a large desktop screen by 2 col when on medium. if there is enough dynamically retrieved data available. . is this inherit in slds or do I need to override with raw css.

ie if there is only enough data for 4 cols on the large desktop view I only want 2 cols wrapped and not 3 cols on 1 row and then 1 col on the 2nd row.

Thanks!

Auto-placement in CSS Grid Layout

Improve this question

1 Answer 1

Reset to default
0

Yes, it is, you can use SLDS grid classes for this. Here is one example.

<div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-2 slds-medium-size_1-of-3 slds-large-size_1-of-3">
            <span>1</span>
    </div>
    <div class="slds-col slds-size_1-of-2 slds-medium-size_1-of-3 slds-large-size_1-of-3">
        <span>2</span>
    </div>
    <div class="slds-col slds-size_1-of-2 slds-medium-size_1-of-3 slds-large-size_1-of-3">
        <span>3</span>
    </div>
</div>

You can find all examples here.

Improve this answer
1
  • Thank you for your response Rahul but I believe that will give me the following.. Say i have 4 cols of dynamic data on a large desktop col1 col2 col3 on one row and the col4 for on the left most area of the box on the 2nd row. I'm looking for it to dynamically adjust to col1 col2 on row 1 to col3 col4 on row 2 without excessive nesting of grids and wrapping with conditionals.
    – ChiCloud
    Commented Oct 8, 2019 at 12:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .