Question

我正在material-ui中使用Grid组件。我无法将网格项目彼此并排堆叠。现在，它们彼此堆叠。我不确定是什么使它们相互堆叠。我这样做的原因是，只有在小屏幕上，网格项目才能彼此堆叠，否则，每个网格项目都应该占据4列。我在前端使用React。这是我的代码：

GridItem：

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

网格： const styles = theme =>（{

  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

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

Answer 2

您可以尝试使用

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

所以您的内部物品可能会彼此并排放置。希望有帮助

Answer 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>

Answer 4

尝试使用 align-items 属性。

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

网格项目不在彼此的其他材料用户界面旁边

4 个答案: