How to create a dynamic, responsive grid?

Question

Im trying to create a dynamic, responsive grid. Just like any standard movie website. in my react project.

I have tried material-ui grid component but am unable to justify the children to flex-start whilst also centering the parent container. i can justify-content center but this looks strange if the bottom row is not full.

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
  control: {
    padding: theme.spacing.unit * 2,
  },
});

class Movies extends React.Component {
  state = {
    spacing: '16',
  };

  render() {
    const { classes } = this.props;
    const { spacing } = this.state;

    return (
      <Grid container className={classes.root} spacing={16}>
        <Grid item xs={12}>
          <Grid container className={classes.demo} justify="flex-start" spacing={Number(spacing)}>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(value => (
              <Grid key={value} item>
                <Paper className={classes.paper} />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    );
  }
}

i expect the parent container/child items to be centered.

here is the output:

if there is another way of creating a responsive movie grid, please let me know.

@Sam. Looking into the documentation but i cannot find anything on making them responsive. do you have a link to where i can find some information? — sClarkeOG, Mar 29 '19 at 09:51
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp bootstrap is used to create responsive design for mobile, desktop and tabs.. it adjust automatically. See the demo example of card in Bootstrap card demo https://getbootstrap.com/docs/4.0/components/card/ and decide if it is what you want (in card group and card deck section) — Masoom Badi, Mar 29 '19 at 10:00
Yes sorry I haven’t used bootstrap in a while. I’ll take a look right now. Thankyou — sClarkeOG, Mar 29 '19 at 10:08
Thankyou after reading into it and having a play i have gotten it to work exactly as i wanted. If youd like to post this as an answer and i will mark it as correct :) — sClarkeOG, Mar 29 '19 at 14:12

score 2 · Answer 1 · answered Mar 29 '19 at 10:09

2

Justify = center should solve your problem

<Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>

answered Mar 29 '19 at 10:09

Ckappo

607
1
9
27

I did mention in the original post that if I do this and there isn’t enough items to fill the last row it will look weird. – sClarkeOG Mar 29 '19 at 10:13
You can limit the Cards in a Row. If you have a hard number of cards just calculate how many cards must be in a Row so that it is spread nicely – Ckappo Mar 29 '19 at 10:19
@sClarkeOG you might want to take a look [here](https://stackoverflow.com/questions/54648178/wrapping-flex-items-in-the-last-row-css-grid-to-the-rescue)... this may not be solved using flexboxes... – kukkuz Mar 29 '19 at 11:29

score 0 · Answer 2 · answered Mar 29 '19 at 10:55

0

<Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>

answered Mar 29 '19 at 10:55

MasterDE

11
2

I did mention in the original post that if I do this and there isn’t enough items to fill the last row it will look weird. – sClarkeOG Mar 29 '19 at 10:58

score 0 · Accepted Answer · answered Mar 29 '19 at 20:08

Bootstrap is easy and use for creating responsive layout for web that supports Desktop, mobile and tablets..

What you want to look for is Card-Group and create Cards as per your style. Here is the Documentation and you can play with Nested Grid Layout to get your desired output.

How to create a dynamic, responsive grid?

3 Answers3