Блог

Я хочу создать свой макет примерно так, используя material UI, я изучил его и подумываю об использовании компонента Grid, но как мне реализовать что-то подобное для среднего столбца в две строки??

Пример кода

Я использую Grid компонент пользовательского интерфейса материала в следующем коде.

 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import clsx from "clsx";

const useStyles = makeStyles({
  container: {
    height: "100%", // So that grids 1 amp; 4 go all the way down
    minHeight: 150, // Give minimum height to a div
    border: "1px solid black",
    fontSize: 30,
    textAlign: "center"
  },
  containerTall: {
    minHeight: 250 // This div has higher minimum height
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Grid container direction="row" spacing={2}>
      <Grid item xs>
        <div className={classes.container}>1</div>
      </Grid>
      <Grid item container direction="column" xs spacing={2}>
        <Grid item xs>
          <div className={classes.container}>2</div>
        </Grid>
        <Grid item xs>
          <div className={clsx(classes.container, classes.containerTall)}>
            3
          </div>
        </Grid>
      </Grid>
      <Grid item xs>
        <div className={classes.container}>4</div>
      </Grid>
    </Grid>
  );
}
 

Приведенный выше код сгенерирует следующий результат:

Объяснение

Общая структура сетки выглядит следующим образом:

 <Grid container direction="row">
  <Grid item xs />
  <Grid item xs container direction="column">
    <Grid item xs />
    <Grid item xs />
  </Grid>
  <Grid item xs />
</Grid>
 

Сначала мы создаем контейнер сетки с гибким направлением строки. Внутри контейнера мы помещаем 3 Grid компонента элемента, чтобы они выровнялись слева направо. Для второго (среднего) Grid элемента мы также определяем его как контейнер с гибким направлением столбца. Внутри него мы размещаем два Grid элемента так, чтобы один был сверху, а другой снизу.

Обратите внимание, что я добавил, в частности, для кода grid 3 className={clsx(classes.container, classes.containerTall)} . По сути, это говорит о том, что мы будем применять classes.container and classes.containerTall к этой сетке. Вы можете прочитать этот раздел подробнее clsx() .

Чтобы сделать сетку 3 немного выше сетки 2, я установил minHeight для сетки 2 150px значение, в то время minHeight как для сетки 3 установлено значение 250px .

Вы можете использовать автоматическую компоновку отсюда

https://material-ui.com/components/grid/#auto-layout

Структура должна быть

• Col
• Col
• —- Ряд (3 размера)
• —- Ряд (3 размера)
• Col