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

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.

  • 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 Oct 8 '19 at 12:01

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.