Grid2 - новая версия сетки

Grid2 — это усовершенствованная система сетки, представляемая библиотекой MUI. Она является эволюцией классической Grid, сохраняя все её преимущества и добавляя новые возможности для более гибкого и удобного построения макетов.

Основные особенности Grid2:

  • Поддержка rowSpacing и columnSpacing напрямую на контейнере.
  • Возможность использовать сокращённые пропсы для размеров: xs={12}, md={6}.
  • Улучшенная работа с типами и автодополнением в TypeScript.
  • Интуитивная настройка порядка и выравнивания элементов с помощью order, justifyContent, alignItems.

Структура Grid2

Grid2 делится на два типа компонентов:

  1. Контейнер (container) – отвечает за построение сетки, задаёт направление (direction) и промежутки (spacing).
  2. Элемент (item) – отдельный блок внутри контейнера, которому можно задавать размеры для разных экранов.

Пример базовой структуры:

import Grid from '@mui/material/Unstable_Grid2';

<Grid container spacing={2}>
  <Grid xs={6}>
    Элемент 1
  </Grid>
  <Grid xs={6}>
    Элемент 2
  </Grid>
</Grid>

В этом примере создаётся сетка из двух колонок, каждая занимает половину ширины контейнера.

Пространственные пропсы: rowSpacing и columnSpacing

Grid2 позволяет задавать промежутки между строками и колонками независимо:

<Grid container rowSpacing={3} columnSpacing={2}>
  <Grid xs={4}>Элемент A</Grid>
  <Grid xs={4}>Элемент B</Grid>
  <Grid xs={4}>Элемент C</Grid>
</Grid>
  • rowSpacing управляет вертикальным расстоянием между рядами.
  • columnSpacing управляет горизонтальным расстоянием между элементами.

Адаптивные размеры элементов

Grid2 поддерживает адаптивное управление шириной элементов через пропсы xs, sm, md, lg, xl.

Пример с адаптивной шириной:

<Grid container spacing={2}>
  <Grid xs={12} sm={6} md={4}>
    Контент 1
  </Grid>
  <Grid xs={12} sm={6} md={4}>
    Контент 2
  </Grid>
  <Grid xs={12} sm={12} md={4}>
    Контент 3
  </Grid>
</Grid>
  • На экранах меньше sm элементы будут занимать всю ширину.
  • На sm каждый элемент займёт половину ширины.
  • На md первый и второй элемент займут треть ширины, а третий также треть.

Выравнивание и порядок элементов

Grid2 поддерживает пропсы justifyContent, alignItems, alignContent и order.

<Grid container justifyContent="space-between" alignItems="center">
  <Grid xs={4} order={2}>Первый</Grid>
  <Grid xs={4} order={1}>Второй</Grid>
  <Grid xs={4} order={3}>Третий</Grid>
</Grid>
  • justifyContent регулирует горизонтальное распределение элементов.
  • alignItems управляет вертикальным выравниванием в строке.
  • order изменяет порядок отображения элементов без изменения исходного кода.

Использование Grid2 с вложенными сетками

Grid2 полностью поддерживает вложенные сетки, что позволяет строить сложные макеты:

<Grid container spacing={2}>
  <Grid xs={6}>
    <Grid container spacing={1}>
      <Grid xs={6}>Вложенный 1</Grid>
      <Grid xs={6}>Вложенный 2</Grid>
    </Grid>
  </Grid>
  <Grid xs={6}>
    Контент с правой стороны
  </Grid>
</Grid>

Такой подход удобен для создания панелей, карточек и сложных адаптивных макетов.

Использование сокращённых пропсов

Grid2 вводит возможность задавать пропсы напрямую на элементе без использования item и container:

<Grid xs={12} sm={6} md={4}>
  Сокращённый элемент
</Grid>

Это делает код чище и проще, особенно при создании больших сеток.

Интеграция с Flexbox

Grid2 построен на основе Flexbox, поэтому все стандартные свойства Flexbox (flexGrow, flexShrink, flexBasis) можно использовать напрямую:

<Grid container>
  <Grid xs={4} flexGrow={1}>Элемент 1</Grid>
  <Grid xs={4} flexShrink={0}>Элемент 2</Grid>
  <Grid xs={4} flexBasis="auto">Элемент 3</Grid>
</Grid>
  • flexGrow позволяет элементу расширяться.
  • flexShrink предотвращает сжатие.
  • flexBasis задаёт базовый размер элемента.

Использование Grid2 с типизацией TypeScript

Grid2 полностью совместим с TypeScript и поддерживает автодополнение для всех пропсов:

import Grid from '@mui/material/Unstable_Grid2';

const Layout: React.FC = () => (
  <Grid container spacing={2}>
    <Grid xs={12} sm={6}>
      Контент TypeScript
    </Grid>
  </Grid>
);

Это повышает безопасность кода и снижает риск ошибок при работе с сеткой.

Grid2 представляет собой мощный инструмент для построения современных адаптивных интерфейсов в MUI, объединяя гибкость Flexbox и удобство системы сетки с упрощённым синтаксисом и улучшенной типизацией.

Оглавление