网格项并不彼此相邻 Material UI

Question

我正在使用material-ui中的Grid组件。我无法将网格项堆叠在一起。现在它们彼此堆叠在一起。我不确定是什么让它们堆叠在一起。我已经做到了，只有在小屏幕上网格项目才会堆叠在一起，否则每个网格项目应该占据 4 列。我在前端使用react。这是我的代码：

网格项：

   const styles = theme => ({

  image: {
    maxWidth: "100%",
    maxHeight: "100%"
  },


});
render() {
    const { post, auth, classes } = this.props;
<div className={classes.root}>
        <Link to={`/post/${post._id}`}>
          <Grid
            item
            key={post.key}
            sm={12}
            md={4}
            lg={4}

          >
            <img src={post.productImage} className={classes.image} />
            <Typography>
              {post.name}
              <br />
              {post.size}
            </Typography>

          </Grid>
        </Link>
      </div>

后馈送：

 render() {
    const { posts } = this.props;

    return posts.map(post => <ListingPost key={post._id} post={post} />);
  }
}

网格：const styles = 主题 => ({

  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },

  grid: {
    margin: "auto",
    width: "80%",
    display: "inner-block"
  },
  paper: {
    margin: "1%",
    padding: "1%",
    width: "80%"
  },

});
render() {
    const { classes } = this.props;
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <div> loading</div>;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Typography align="center" variant="display2">
           Listings
          </Typography>
          <Grid container className={classes.grid} spacing={16}>
            {postContent}
          </Grid>
        </Paper>
      </div>
    );
  }
}

Answer 1

flexWrap: "wrap"就像 Yash Rahurikar 所说，删除样式线Grid，然后添加wrap='nowrap'到网格容器中。

Answer 2

您可以尝试使用

<Grid container direction={'row'}></Grid>

这样你的内部物品就可以并排排列。希望有帮助