[GridList] responsive cols and rows

[sean-stanley]

Description

I'm using this project after completing 2-3 projects with Angular Material. There is quite a bit of overlap in how the components and their options work. Sadly though one feature I really miss from Angular Material is the ability to set different cols and rows on different device widths.

Not sure how much work it is but it would be really great if we could have the GridList able to be 2 columns wide on mobile and 4 columns on tablet etc.

The props for GridList could become something like

• colXs, colSm, colMd, colLg
• paddingXs, paddingSm, paddingMd, paddingLg
• cellHeightXs, cellHeightSm, cellHeightMd, cellHeightLg

This would be really useful for responsive applications. Thanks for considering this feature.

Images & references

https://material.angularjs.org/latest/demo/gridList

[stunaz]

I think it is ok like that. You have the option to pass your own values. This is exactly what I do, I pass the cols, rows or padding base on the width (window.innerWidth) of the screen which achieves the same goal.

[sean-stanley]

Interesting. I'm quite new to React, but I assumed that gridList under the hood just applies css classes to some divs so wouldn't it be more performant to simply have some media queries on the gridList styles for the breakpoints rather than watching and debouncing window.innerWidth as well as completely re-rendering the component when window.innerWidth changes?

I suppose in production, window.innerWidth doesn't really change that often and there is always the React-dimensions library to get the values easily but it just seems like maybe we're asking javascript to do a whole lot of work that css could do better and with fewer resources. Though I'm not a performance expert so please correct me if I'm wrong.

[chrislim]

Wish we could use something like the responsive syntax on the Box
https://material-ui.com/system/basics/#responsive

cols={{ xs: 2, sm: 3, md: 3, lg: 6 }}

[dohomi]

Any chance to re-open this issue? I'd like the simplicity how Grid works and cols inside of GridList would need to be responsive for many use cases. An example how to resolve it would be great inside of the docs.

[oliviertassinari]

@dohomi GridList should probably be named ImageList (we will likely rename it in v5). Maybe you would prefer #17000?

[dohomi]

@oliviertassinari thanks for your input. I am overwriting the width through custom css based on props. It works but I think an API @chrislim proposed would be great.

[AyoCodess]

cols={{ xs: 2, sm: 3, md: 3, lg: 6 }}

this is still not possible? is there a workaround?

[jesusvallez]

cols={{ xs: 2, sm: 3, md: 3, lg: 6 }}

this is still not possible? is there a workaround?

my workaround...

const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.up('sm'))

<ImageList variant="quilted" cols={isMobile ? 2 : 3} gap={8}>
   ...
</ImageList>

Its ugly but it's the only one solution I found

[montanaflynn]

This would be very helpful!

[dohomi]

@oliviertassinari any chance of re-open this issue? responsive cols and gap would be great addition for the use of this component

[Asrorjon17]

cols={{ xs: 2, sm: 3, md: 3, lg: 6 }}
this method did not work for some reason in me

[raselmahmud-coder]

const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.up('sm'))

Yeah, it works, But why not work this way? <ImageList cols={{ xs: 2, sm: 3, md: 3}} >