网格项目不在彼此旁边 Material UI答案

【问题标题】：Grid Items aren't beside eachother Material UI网格项目不在彼此旁边 Material UI
【发布时间】：2019-01-31 03:23:09
【问题描述】：

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

网格项：

   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>

PostFeed：

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

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

网格：常量样式 = 主题 => ({

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

【问题讨论】：

标签： javascript css reactjs react-router material-ui

【解决方案1】：

你可以尝试使用

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

所以你的内在物品可以彼此并排排列。希望有帮助

【讨论】：

它仍然堆叠在一起，而不是排成一排。
我在代码顶部添加了我为每个文件制作的css代码。
移除 flex-wrap

【解决方案2】：

就像 Yash Rahurikar 所说，删除 Grid 样式的 flexWrap: "wrap" 行，并将 wrap='nowrap' 添加到您的 Grid 容器中。

【讨论】：

【解决方案3】：

<Grid
  container
  direction="row"
  justify="flex-start"
  alignItems="flex-start"
  spacing={1}
>
     //above ?? should be your main grid container

     //wrap your grid item with the link using component prop
    <Grid item key={post.key} component={Link} to={`/post/${post._id}`} >
     // Your rest content @here
    </Grid>
</Grid>

【讨论】：

【解决方案4】：

尝试使用align-items 属性。

<Grid container spacing={1} alignItems="flex-end">

【讨论】：