我已经取得了与网格有路由链接头组件，我只是希望这个网格是通过应用材料UI断点在移动的屏幕上响应。意思是不是显示所有的网格项目通过 Package 下，只是显示2个项目在移动的屏幕上。谢谢

这是我的header.js文件的代码：

import React from 'react'
import './Header.css'

import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import { useNavigate } from 'react-router-dom';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme)=>({
root:{
    [theme.breakpoints.down('sm')]: {
        
      }
}
}))

export const Header = () => {
    const classes =useStyles()
    const navigate = useNavigate()
    return (
        // <div className='header'>
        <div>
            {/* <div className='plomxName'>PlomX</div> */}
            {/* <Box sx={{ flexGrow: 1 }}> */}
            <AppBar style={{ background: 'black', height: '109px' }}>

                    <Grid container justifyContent="center" spacing={2} className={classes.root}>
                        <div className='plomxName'><Button onClick={() => navigate('/')} sx={{ color: "white" }}>PlomX</Button></div>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/games')} sx={{ color: "white" }}><SportsEsportsIcon sx={{ color: 'white' }} />Games</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/nftmarketplace')} sx={{ color: "white" }}><StorefrontIcon sx={{ color: 'white' }} />NFT Marketplace</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/metaverse')} sx={{ color: "white" }}><AcUnitIcon sx={{ color: 'white' }} />MetaVerse</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/getyourgameon')} sx={{ color: "white" }}><GamepadIcon sx={{ color: 'white' }} />Get your game on Blockchain</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/careers')} sx={{ color: "white" }}><ChildCareIcon sx={{ color: 'white' }} />Careers</Button></Grid>
                    </Grid>

            </AppBar>
            {/* </Box> */}
        </div>
    )
}

实际的设计，我想做的是这样的。