Блог

Я пытаюсь создать веб — страницу, на которой будет отображаться это:

Я не могу расположить предметы так, как хочу. Я пытаюсь следовать этому руководству по flexbox, но не все работает, не знаю, как иерархически упорядочить сетки (если для этого подходит использование сеток), чтобы это работало на любом размере экрана. Ссылка на код в песочнице

Мой код:

 import "./styles.css";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";

export default function App() {
  const Item = styled(Paper)(({ theme }) => ({
    ...theme.typography.body2,
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }));

  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container sx={{ alignContent: "center" }}>
        <Grid container spacing={2} sx={{ justifyContent: "space-between" }}>
          <Grid item xs={2} md={2}>
            <Item>Top Left</Item>
          </Grid>
          <Grid item xs={2} md={2}>
            <Item>Top Right</Item>
          </Grid>
        </Grid>
        <Grid
          container
          spacing={2}
          sx={{ justifyContent: "center", alignSelf: "center" }}
        >
          <Grid item xs={3} md={3}>
            <Item>Center</Item>
          </Grid>
          <Grid item xs={3} md={3}>
            <Item>Center</Item>
          </Grid>
        </Grid>
        <Grid
          container
          spacing={2}
          sx={{ justifyContent: "center", alignSelf: "center" }}
        >
          <Grid
            item
            xs={6}
            md={6}
            sx={{ justifyContent: "center", alignSelf: "center" }}
          >
            <Item>Center</Item>
          </Grid>
        </Grid>
        <Grid
          container
          spacing={2}
          sx={{
            justifyContent: "center",
            alignItems: "center",
            alignContent: "center"
          }}
        >
          <Grid item xs={3} md={3}>
            <Item>Close to Bottom</Item>
          </Grid>
          <Grid item xs={3} md={3}>
            <Item>Close to Bottom</Item>
          </Grid>
          <Grid item xs={3} md={3}>
            <Item>Close to Bottom</Item>
          </Grid>
          <Grid item xs={3} md={3}>
            <Item>Close to Bottom</Item>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
}
 

Есть какие-нибудь идеи о том, как реализовать это на практике?