score:-3

when you say you want to make the grid responsive, do you perhaps mean adding more items dynamically? if not, by default material-ui is responsive (meaning your viewport is dynamically sized depending on the device you view on), and depending on your gridlist properties (like cols, rows, spacing etc) you can determine the style. if you have a look at https://material-ui-next.com/demos/grid-list/ there are a few examples to get you started.

score:1

i just came across this issue and while using @morlo's answer, i did a mistake and it started showing a js error but strangely it also made it responsive! and by responsive, i mean that it shows a horizontal scrolling which is common in mobiles.

so i removed that code and used different values and cols={0} worked!

perhaps it is not documented but it works actually.

also worth mentioning some other settings that i used along:

<gridlist style={{
        width: '100%',
        maxheight: 320,
        flexwrap: 'nowrap'
}} cols={0} cellheight={'auto'}>
...
</gridlist>

score:4

as of material-ui v4.4, you can use usemediaquery react hook in conjunction with theme.breakpoints.up:

import usemediaquery from '@material-ui/core/usemediaquery';

function mycomponent() {
  const matches = usemediaquery(theme => theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

⚠️ there is no default theme support, you have to inject it in a parent theme provider.

score:6

you can choose the cols value depending on the width (xs, sm, md, lg, xl), look at this example where 1 column is set for smaller screens.

import react from "react";
import { connect } from 'react-redux';
import proptypes from 'prop-types';
import compose from 'recompose/compose';

// @material-ui/core components
import withstyles from "@material-ui/core/styles/withstyles";
import withwidth from '@material-ui/core/withwidth';
import gridlist from '@material-ui/core/gridlist';
import gridlisttile from '@material-ui/core/gridlisttile';
import gridlisttilebar from '@material-ui/core/gridlisttilebar';

const styles = theme => ({ });

class mycomponent extends react.component {
    render() {
        const { classes, currentuser, images, width } = this.props;

        let columns = width === 'xs' || width === 'sm'  ? 1 : 2;

        return (
            <div classname={classes.root}>
                <gridlist cellheight={180} cols={columns} classname={classes.gridlist}>
                    {images.map(image => (
                    <gridlisttile key={image.id}>
                        <img src={ image.path } />
                        <gridlisttilebar
                            title={ image.name }
                        />
                    </gridlisttile>
                    ))}
                </gridlist>
            </div>
        );
    }
}

mycomponent.proptypes = {
    currentuser: proptypes.object,
    images: proptypes.array.isrequired
};

function mapstatetoprops(state) {
    return {
        currentuser: state.user.currentuser
    };
}

export default compose(
  withstyles(styles, {
    name: 'mycomponent',
  }),
  withwidth(),
  connect(mapstatetoprops),
)(mycomponent);

score:34

u can use the layout breakpoints provide by mui to toggle gridlist or gridlisttile cols property. the code will look like this:

...
import withwidth, { iswidthup } from '@material-ui/core/withwidth';
...

const mycomponent = props => {
  const getgridlistcols = () => {
    if (iswidthup('xl', props.width)) {
      return 4;
    }

    if (iswidthup('lg', props.width)) {
      return 3;
    }

    if (iswidthup('md', props.width)) {
      return 2;
    }

    return 1;
  }

  return(
    ...
    <gridlist spacing={15} cellheight={400} cols={getgridlistcols()}>
      {
        myitemsarray.map(item => (
          <gridlisttile key={item} cols={1}>
            <foobar />
          </gridlisttile>
        ))
      }
    </gridlist>
    ...
  );
};

...

export default withwidth()(mycomponent);

Related Query

More Query from same tag