Responsive grid system for various screen sizes

[mikewagz]

Ionic version: (check one with "x")
[X] 2.x

I'm submitting a ... (check one with "x")
[X] feature request

Current behavior:

Currently the grid system works well for a static layout.

Expected behavior:

Ideally the grid system would be responsive (a la Bootstrap) to accommodate various mobile device screen sizes and rotations. For example, on a phone in portrait orientation, three <col width-33> images in a row look great.

When I flip it to landscape, however, it looks disproportioned. In this example, it would be great to have five columns in the row to take advantage of this orientation (ie <col width-sm-33 width-md-20>).

When viewing on a tablet in landscape, maybe I'd want ten images in a row (ie width-lg-10).

Any chance we can get this functionality built-in to Ionic 2?

[ghenry22]

instead of a static percentage of screen width for items it would be handy to be able to set a min-width and max-width (or height) for items in the grid, this provides an envelope that the items can be scaled within which is know to be legible.

Then have the grid fit as many items as possible to a row and wrap, scaling items as required to properly fill the space on the row within the defined min and max.

[dylanvdmerwe]

I think ionic's grid system still requires enhancements one day. They should take a look at implementing something similar to a bootstrap 4 type of grid system one day.

[brandyscarney]

Thanks for the issue, I'm going to close as a duplicate of #6050. Could you toss some upvotes on that issue? :)

[ionitron-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.