Как создать динамическую, адаптивную сетку?

Question

Я пытаюсь создать динамическую, отзывчивую сетку. Как и любой стандартный веб-сайт с фильмами. в моем реактивном проекте.

Я пробовал компонент сетки материал-пользовательский интерфейс, но не смог оправдать дочерние элементы для гибкого запуска, а также для центрирования родительского контейнера. Я могу обосновать содержание центра, но это выглядит странно, если нижний ряд не заполнен.

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>
    );
  }
}

Я ожидаю, что родительский контейнер / дочерние элементы будут центрированы.

вот вывод:

если есть другой способ создания адаптивной сетки фильмов, пожалуйста, дайте мне знать.

Answer 1

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

Answer 2

Bootstrap прост в использовании и используется для создания адаптивного макета для веб-приложений, поддерживающих настольные ПК, мобильные устройства и планшеты.

Card-Group и создайте карт в соответствии с вашим стилем.Вот документация , и вы можете поиграть с Nested Grid Layout , чтобы получить желаемый результат.

Answer 3

Обоснуйте = центр должен решить вашу проблему

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