title: Dynamically adjust ImageList columns based on screen size?
body: <p>I've tried using <a href="https://mui.com/components/image-list/#main-content" rel="noreferrer"><code>ImageList</code></a> component instead of <a href="https://mui.com/components/grid/#main-content" rel="noreferrer"><code>Grid</code></a> as I just need a grid of photos with titles and it seems to be the whole point of <code>ImageList</code>. My issue is that unlike with Grid I <strong>cannot pass <a href="https://mui.com/customization/breakpoints/" rel="noreferrer">breakpoint</a> props</strong> for different screen sizes (which I find weird as this would seem logical) so that I can get <strong>different count of columns on different screens</strong>. What would be the best approach to adjust number of columns based on screen size?</p>