Адаптивные колонки и breakpoints

В MUI (Material-UI) построение адаптивной сетки осуществляется с помощью компонента Grid. Он реализует систему 12-колоночного фреймворка, где каждая колонка может занимать от 1 до 12 единиц ширины. Основное преимущество — возможность легко создавать адаптивные интерфейсы, подстраивающиеся под разные размеры экранов.

Компонент Grid и его свойства

Grid имеет два основных типа: контейнер (container) и элемент (item). Контейнер отвечает за разметку сетки, а элементы располагаются внутри него.

Пример базового контейнера:

<Grid container spacing={2}>
  <Grid item xs={12} sm={6} md={4}>
    <Paper>Контент 1</Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    <Paper>Контент 2</Paper>
  </Grid>
</Grid>

Разбор ключевых свойств:

  • xs, sm, md, lg, xl — breakpoints, определяющие ширину колонки для разных экранов.

    • xs — телефоны
    • sm — планшеты
    • md — маленькие ноутбуки
    • lg — десктопы
    • xl — большие экраны

  • spacing — расстояние между колонками, измеряется в единицах темы MUI (обычно 8px * n).

Принцип работы breakpoints

Каждое свойство xs, sm, md и т.д. определяет количество колонок, которое займет элемент при ширине экрана, соответствующей breakpoint. Если свойство для меньшего размера не задано, оно наследуется от ближайшего меньшего breakpoint.

Пример наследования:

<Grid item sm={6} md={4}>
  <Paper>Контент</Paper>
</Grid>
  • На xs (мобильных устройствах) колонка займет 12 колонок (по умолчанию на всю ширину).
  • На sm (планшет) — 6 колонок (половина экрана).
  • На md (десктоп) — 4 колонки (треть экрана).

Использование auto и true для динамической ширины

MUI позволяет задавать адаптивную ширину без жесткого количества колонок:

<Grid item xs="auto">
  <Paper>Автоматическая ширина</Paper>
</Grid>
<Grid item xs>
  <Paper>Растягивается на оставшееся пространство</Paper>
</Grid>
  • xs="auto" — колонка занимает только необходимое пространство для контента.
  • xs без значения (true) — колонка растягивается на всё доступное пространство контейнера.

Комбинирование flex-настроек с Grid

Grid основан на Flexbox, поэтому можно использовать свойства justifyContent, alignItems, alignContent:

<Grid container spacing={2} justifyContent="center" alignItems="flex-start">
  <Grid item xs={12} sm={6}>
    <Paper>Контент 1</Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper>Контент 2</Paper>
  </Grid>
</Grid>
  • justifyContent управляет горизонтальным распределением элементов.
  • alignItems — выравнивание по вертикали внутри контейнера.
  • alignContent — распределение пространства между рядами, когда их несколько.

Вложенные Grid

Для сложной разметки Grid можно вкладывать:

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Paper>Широкая секция</Paper>
    <Grid container spacing={1}>
      <Grid item xs={6}>
        <Paper>Вложенная колонка 1</Paper>
      </Grid>
      <Grid item xs={6}>
        <Paper>Вложенная колонка 2</Paper>
      </Grid>
    </Grid>
  </Grid>
</Grid>
  • Вложенные сетки наследуют flex-настройки родителя.
  • Можно менять spacing и breakpoints отдельно для каждой вложенной сетки.

Адаптивное скрытие и отображение колонок

Для контроля видимости элементов на разных размерах экрана используется компонент Hidden или свойство sx с media queries:

<Grid item xs={12} sm={6}>
  <Paper sx={{ display: { xs: 'none', sm: 'block' } }}>Скрыт на мобильных</Paper>
</Grid>
  • xs: 'none' скрывает элемент на мобильных.
  • sm: 'block' отображает на планшетах и выше.

Советы по оптимальной работе с колонками

  1. Всегда планировать 12-колоночную сетку, чтобы элементы удобно делились на части.
  2. Использовать breakpoints осмысленно, не задавая лишние значения, если они совпадают с наследуемыми.
  3. Использовать spacing вместо margin/padding, чтобы сохранить консистентность интерфейса.
  4. Комбинировать flex-свойства для точного выравнивания элементов.

Итоговая структура адаптивной сетки

Пример комплексной сетки с вложением, breakpoints и flex-настройками:

<Grid container spacing={3} justifyContent="space-between">
  <Grid item xs={12} md={8}>
    <Paper>Основной контент</Paper>
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6}>
        <Paper>Вложенный блок 1</Paper>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Paper>Вложенный блок 2</Paper>
      </Grid>
    </Grid>
  </Grid>
  <Grid item xs={12} md={4}>
    <Paper>Боковая панель</Paper>
  </Grid>
</Grid>

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

Оглавление