feat: size-xxl for ion-col

[conde2]

Feature Request

Ionic version: [x] 5.x

Describe the Feature Request I'm working on a PWA and I cant make good layouts for bigger screens because the pre defined sizes is not enought for larger screens, nowadays a lot of people have monitors with resolutions of 1920x1080 and bigger, so the feature I'm requesting is to include more sizes to ion-col, I would suggest adding the XXL size with width starting after 1440

      <ion-col size-xxl="2" size-xl="3" size-lg="4" size-md="4" size-sm="6" size-xs="12" >

      </ion-col>

And more options would be good for witdh even bigger.

If there is any way to add this sizes, I would appreciate point me out how to do it.

[liamdebeasi]

Thanks for the issue. Can you please describe your use case for this feature? Alternatively, have you tried customizing the breakpoints for the grid: https://ionicframework.com/docs/layout/grid#customizing-the-grid?

[conde2]

I have a responsive layout with cards that represent exercises, It is responsive, when the screen size changes I change the number of columns, but when the screen size is too big 1920x1080 or more for example, I'm not able to configure my grid to fit more columns so the cards dont get expanded too much.

So one more breaking point would be enought to fix that.

[liamdebeasi]

Sorry, I was mistaken. I forgot developers cannot customize the grid breakpoints due to a platform limitation: https://ionicframework.com/docs/theming/advanced#variables-in-media-queries

Thanks for the use case -- I think that makes sense. I will mark this as a feature request.

[CptRolinho]

What's the status on this feature request?

[elinake]

xxl breakpoints are also needed in all Ionic projects in my company. It's pretty easy to customize them for example like this,

@media (min-width: 1600px) {
  [size-xxl-4] {
    -webkit-box-flex: 0 !important;
    -webkit-flex:  0 0 calc(calc(4 / var(--ion-grid-columns, 12)) * 100%) !important;
    -ms-flex: 0 0 calc(calc(4 / var(--ion-grid-columns, 12)) * 100%) !important;
    flex: 0 0 calc(calc(4 / var(--ion-grid-columns, 12)) * 100%) !important;
    width: calc(calc(4 / var(--ion-grid-columns, 12)) * 100%) !important;
    max-width: calc(calc(4 / var(--ion-grid-columns, 12)) * 100%) !important;
  }
}

But it would be good to include in the official library. Laptop screen is already the biggest size that Ionic accounts for, and if you are using laptop, it's pretty much guaranteed you are also using an external screen which are much bigger than laptop screens. Also, phones have been getting bigger a long time, so I think xxl would have more usage than xs.

[liamdebeasi]

Hi everyone,

I spoke with the team, and we are not looking to add the requested feature at this time. Ionic Framework's focus is on mobile/tablet viewports, so adding support for desktop viewports is out of scope. Let me know if there are any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.