How to extend the SLDS Grid with additional x-large and xx-large breakpoints to support huge screens?

Question

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

Answer 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:

When width is < 700px:

When width is << 700px: