網格項目不在彼此旁邊 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 樣式 = 主題 => ({

  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

我在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>

后送：

 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 2

我在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>

后送：

 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 3

我在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>

后送：

 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 4

嘗試使用align-items屬性。

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