我是非常新的材料用户界面， typescript ，并作出React，所以如果我说了什么不正确的或使用错误的术语请纠正我。我有4个框，我想放在一个页面上，但三个框必须去在一排和堆叠第四个底部的框1。
我当前有一个格网作为父格网，它将这些框组合在一起，如图所示

<Grid container={true} spacing={1} justifyContent="center" alignItems='flex-start'>
    <Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
      <SomeData data={defaultDeploymentFrequencyData}/>
    </Box>
    <Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
      <SomeData data={defaultDeploymentFrequencyData}/>
    </Box>
    <Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
      <SomeData data={defaultDeploymentFrequencyData}/>
    </Box>
    <Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
      <SomeData data={defaultDeploymentFrequencyData}/>
    </Box>
  </Grid>

与其一直使用方框并在方框中进行编辑，是否有一种方法可以调用一个方法，使方框正确对齐

export const BoxLayout = ():JSX.Element => {
  return (
    <Box>
      sx={{
        display: 'grid',
        gap: 1,
        gridTemplateColumns: 'repeat(2, 1fr)',
      }}
    </Box>
  )
}

我在想，在布置 Package 盒时，可以这样称呼它，比如

<Grid container={true} spacing={1} justifyContent="center" alignItems='flex-start'>
  <BoxLayout>
   <SomeData data={defaultDeploymentFrequencyData}/>
   <SomeData data={defaultDeploymentFrequencyData}/>
   <SomeData data={defaultDeploymentFrequencyData}/>
   <SomeData data={defaultDeploymentFrequencyData}/>
  <BoxLayout>
</Grid>