2

I need a grid having 1 columns for phones 2 columns for ipads and 3 columns on 1080p screens. I will also need more distinction for devices between 1000px and 3000px in screen-width. How to do that with vanilla SLDS?

What I've tried so far on the grid elements so far is

slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-large-size_1-of-3 

Works to distinct phones. But the breakpoint for large is to small. ipad will end up as being "large".

a) I need the ipad different of desktop b) i need to distinct between small desktop (e.g. width 1024 to 1400px) screen, bigger screens (eg. width 1400 to 1920px) and huge desktop screens (>1920px).

Actually the 3 sizes give me control over

  • small < 768px
  • medium < 1024px
  • large >= 1024px

By far not enough.

So I thought there should be something like x-large and xx-large. Is that stuff existing and usable?

I've tried without success:

slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-x-large-size_1-of-3 

this fails, too

slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-x_large-size_1-of-3 

and this fails, too

slds-col slds-size_1-of-1 slds-medium-size_2-of-4 slds-xlarge-size_1-of-3 

how to use x-large and xx-large?

how to extend it if xx-large would not be enough? eg. if I would need xxx-large or xxxx-large to distinct between the super huge screens?

CURRENT WORKAROUND

My current workaround is to calculate my desired column-count in the controller and to apply it via the class-attribute dynamically like this

    class = "{!''
        +' whateverClassName '
        +' slds-large-size_1-of-'   + v.layoutLargeColumnCount + ' '
    }"

It works, but I hate this approach and would love to replace it by something else.

SCREENSHOTS

enter image description here

enter image description here

2
  • 1
    Unfortunately, grids only support the three breakpoints, 480, 768, and 1024. If you want any other type of design, you'll have to build your own.
    – sfdcfox
    Oct 19, 2019 at 14:57
  • @sfdcfox I see, and I did. Basically I'm down to 'slds-size_1-of-'+v.layoutColumnCount - but I still think that is poor design provided by salesforce. Now I have to take care of rerenderings, window-resizings and other stuff always applying my custom "How-Many-Cols-Do-I-Have?-Logic" and that's error-prone. Delivering good and distinctive UX for super huge screens is IMHO exactly as important as providing good UX for phones or tablets. Any-Device-First, so to say...
    – Uwe Heim
    Oct 19, 2019 at 15:24

1 Answer 1

1

but I still think that is poor design provided by salesforce. Now I have to take care of rerenderings, window-resizings and other stuff always applying my custom "How-Many-Cols-Do-I-Have?-Logic" and that's error-prone.

TRUE! it will be too complicated with slds-size_1-of-'+v.layoutColumnCount' approach.

So, you can use media queries for fully custom/simple yet powerful solution. You can use this guide to begin with.

I also created this playground link for you.

When width is > 700px: enter image description here

When width is < 700px: enter image description here

When width is << 700px: enter image description here

1
  • I agree that this looks like a way cleaner approach, but I would need a lot more to get something like the grid system with a bottom-up approach. Would feel like reinventing the wheel. My guess is, that there is a way to extend the grid system with additional breakpoints. But I think salesforce should do that for us to encourage and support us to create an exceptional UX for huge screens in a way that the display "real estate" is used dynamically and smoothly. With the given 3 breakpoints focusing mainly mobile devices, that is simply not powerful enough.
    – Uwe Heim
    Oct 19, 2019 at 17:58

You must log in to answer this question.

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