MUI网格系统

Question

目前使用的是MUI网格系统，我绝对不是专家。我目前有一个网格，在你的典型屏幕上默认看起来像这样

​

如果你把屏幕一直缩小到600px，网格就会变得乱七八糟，看起来有点摇摇晃晃的。

​

一旦你的像素低于600px，网格就会像这样堆叠起来

​

我希望这个期望的效果在大约900像素之前发生，有什么方法可以实现吗？我已经尝试了几乎所有的方法，但网格堆叠不像我在最后一张图片中所希望的那样。我的网格如下：

 <Grid
          container
          spacing={2}
          className={classes.grid}
          alignItems='center'
        >
          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ marginBottom: 20 }}
          >
            <Img
              placeholder={BarhopPlace}
              src={BarHop}
              alt='barhop'
              cache={false}
              className={classes.image}
            />
          </Grid>

          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ width: "100%", textAlign: "center", padding: 0 }}
          >
            <Container
              component='main'
              maxWidth='xs'
              style={{
                marginBottom: 20,
                visibility: ready ? "visible" : "hidden",
              }}
            >
              <Typography
                variant='h5'
                variant='h5'
                style={{ marginBottom: 10 }}
              >
                Bar Hop
              </Typography>

              <Typography variant='body2'>
                A platform that provides users with the top drinking places
                based on their location. Technologies used: ReactJS, NodeJS,
                JavaScript, and the Yelp API .
              </Typography>
              <br />
              <Box className={classes.alumniChips}>
                <Tooltip
                  title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
                  aria-label='add'
                >
                  <a
                    rel='noopener noreferrer'
                    href='https://barhop-wyncode.herokuapp.com/'
                    target='_blank'
                    style={{ margin: "1%" }}
                  >
                    <Chip
                      icon={<LanguageIcon />}
                      label='View Site'
                      clickable
                      color='primary'
                    />
                  </a>
                </Tooltip>
                <a
                  rel='noopener noreferrer'
                  href='https://github.com/Rterrell25/Bar_Hop_React_App'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<GitHubIcon />}
                    label='View Code'
                    clickable
                    color='primary'
                  />
                </a>
                <BarHopModal />
              </Box>
            </Container>
          </Grid>
          <br />
          <Divider style={{ width: "100%" }} />
          <br />
          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ marginTop: 20, marginBottom: 20 }}
          >
            <Img
              placeholder={OddjobsPlace}
              src={Oddjobs}
              alt='oddjobs'
              cache={false}
              className={classes.image}
            />
          </Grid>

          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ width: "100%", textAlign: "center", padding: 0 }}
          >
            <Container
              component='main'
              maxWidth='xs'
              style={{
                marginBottom: 20,
                visibility: ready ? "visible" : "hidden",
              }}
            >
              <Typography
                variant='h5'
                variant='h5'
                style={{ marginBottom: 10 }}
              >
                Odd Jobs
              </Typography>

              <Typography variant='body2'>
                A platform that pairs consumers with reliable contractors.
                Technologies used: ReactJS, Ruby on Rails, PostgreSQL, Calendly
                Integration and Google Maps API.
              </Typography>
              <br />
              <Box className={classes.alumniChips}>
                <Tooltip
                  title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
                  aria-label='add'
                >
                  <a
                    rel='noopener noreferrer'
                    href='https://oddjobs-react.herokuapp.com/'
                    target='_blank'
                    style={{ margin: "1%" }}
                  >
                    <Chip
                      icon={<LanguageIcon />}
                      label='View Site'
                      clickable
                      color='primary'
                    />
                  </a>
                </Tooltip>
                <a
                  rel='noopener noreferrer'
                  href='https://github.com/Rterrell25/Oddjobs_React_App'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<GitHubIcon />}
                    label='View Code'
                    clickable
                    color='primary'
                  />
                </a>
                <OddjobsModal />
              </Box>
            </Container>
          </Grid>
          <br />
          <Divider style={{ width: "100%" }} />
          <br />
          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ marginTop: 20 }}
          >
            <Img
              placeholder={JobTrackerPlace}
              src={JobTracker}
              cache={false}
              alt='JobTracker'
              className={classes.image}
            />
          </Grid>

          <Grid
            item
            sm={6}
            xs={12}
            className={classes.grid}
            style={{ width: "100%", textAlign: "center", padding: 0 }}
          >
            <Container
              component='main'
              maxWidth='xs'
              style={{
                marginBottom: 20,
                visibility: ready ? "visible" : "hidden",
              }}
            >
              <Typography variant='h5' style={{ marginBottom: 10 }}>
                JobTracker
              </Typography>

              <Typography variant='body2'>
                A platform that allows recent graduates from Wyncode Academy to
                track job applications, store resume's, and monitor follow ups.
                Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
                Google Firestore.
              </Typography>
              <br />
              <Box className={classes.alumniChips}>
                <a
                  rel='noopener noreferrer'
                  href='https://jobtracker.netlify.app/'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<LanguageIcon />}
                    label='View Site'
                    clickable
                    color='primary'
                  />
                </a>
                <a
                  rel='noopener noreferrer'
                  href='https://github.com/Rterrell25/JobTracker_Client'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<GitHubIcon />}
                    label='View Code'
                    clickable
                    color='primary'
                  />
                </a>
                <JobTrackerModal />
              </Box>
            </Container>
          </Grid>
        </Grid>

很抱歉发了这么长的帖子！谢谢!

Answer 1

您需要做的就是将sm={6}更改为md={6} (请参阅https://material-ui.com/customization/breakpoints/#breakpoints)。sm是600px以上，md是960px以上。然后，您的项目将是从0px (xs)到960px (md)的全宽(12列)。