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

Posted 2023-02-21

【中文标题】网格项目不在彼此旁边 Material UI

【英文标题】：Grid Items aren't beside eachother 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>
    );
  

【参考方案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">