Breakpoints в Grid

Grid в Ant Design — это система сетки, основанная на Flexbox, которая позволяет создавать адаптивные макеты. Ключевой инструмент для управления адаптивностью — breakpoints. Они определяют, как компоненты сетки изменяют свои размеры и расположение в зависимости от ширины экрана.

В Ant Design существует стандартный набор точек останова (breakpoints):

Breakpoint Минимальная ширина
xs 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1600px

Каждый из этих брейкпоинтов можно использовать для задания ширины колонок (Col), отступов (gutter) и настроек скрытия элементов (responsive visibility).

Использование Breakpoints для колонок

В Ant Design Grid колонка (Col) может иметь разные ширины в зависимости от ширины экрана. Это делается с помощью свойства span, которое может быть объектом, где ключи — это брейкпоинты:

<Row>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    Контент
  </Col>
</Row>

Здесь:

  • xs={24} — на экранах меньше 576px колонка занимает всю ширину.
  • sm={12} — на экранах ≥576px колонка занимает половину ширины.
  • md={8} — на экранах ≥768px колонка занимает треть ширины.
  • lg={6} — на экранах ≥992px колонка занимает четверть ширины.
  • xl={4} — на экранах ≥1200px колонка занимает одну шестую ширины.

Такой подход обеспечивает динамическое изменение макета без написания медиа-запросов вручную.

Настройка отступов с помощью Gutter

Свойство gutter управляет расстоянием между колонками. Оно также поддерживает адаптивные значения:

<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
  <Col span={12}>Колонка 1</Col>
  <Col span={12}>Колонка 2</Col>
</Row>

Здесь отступ увеличивается с ростом ширины экрана:

  • xs — 8px
  • sm — 16px
  • md — 24px
  • lg — 32px

Примечание: gutter может быть числом (фиксированное значение для всех экранов) или объектом с брейкпоинтами.

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

Иногда необходимо показывать или скрывать контент на разных устройствах. Для этого используется комбинация useBreakpoint из Grid:

import { Grid, Col } from 'antd';
const { useBreakpoint } = Grid;

const ResponsiveComponent = () => {
  const screens = useBreakpoint();

  return (
    <Row>
      {screens.md && <Col span={12}>Контент только для md и выше</Col>}
      <Col span={12}>Контент для всех</Col>
    </Row>
  );
};

Метод useBreakpoint возвращает объект с булевыми значениями для каждого брейкпоинта:

{
  xs: true,
  sm: true,
  md: false,
  lg: false,
  xl: false,
  xxl: false
}

Это позволяет условно рендерить компоненты в зависимости от ширины экрана.

Комбинирование span, offset и order с Breakpoints

Col поддерживает не только span, но и offset и order. Эти свойства также могут быть адаптивными:

<Col
  xs={{ span: 24, offset: 0, order: 1 }}
  md={{ span: 12, offset: 6, order: 2 }}
>
  Контент
</Col>
  • span — количество колонок, занимаемых компонентом.
  • offset — отступ слева в колонках.
  • order — порядок отображения в Flex-контейнере.

Использование этих свойств с брейкпоинтами позволяет создавать сложные адаптивные макеты, изменяя расположение и размер колонок без медиа-запросов.

Настройка пользовательских Breakpoints

По умолчанию Ant Design использует стандартный набор брейкпоинтов. Для кастомизации можно изменить тему:

import { ConfigProvider } from 'antd';

const customBreakpoints = {
  xs: 0,
  sm: 500,
  md: 700,
  lg: 900,
  xl: 1100,
  xxl: 1500,
};

<ConfigProvider theme={{ token: { gridBreakpoints: customBreakpoints } }}>
  <App />
</ConfigProvider>

Это позволяет подстраивать сетку под конкретные требования проекта.

Практические советы

  • Всегда задавать span для всех ключевых брейкпоинтов, чтобы избежать непредсказуемого поведения на разных устройствах.
  • Использовать useBreakpoint для условного рендеринга компонентов, а не только для span.
  • Комбинировать gutter с брейкпоинтами для гармоничного распределения пространства.
  • Для сложных макетов применять offset и order с брейкпоинтами.
  • При необходимости создавать кастомные брейкпоинты через ConfigProvider для полного контроля над адаптивностью.

Итоговый эффект применения Breakpoints

Использование брейкпоинтов в Ant Design Grid позволяет:

  • Создавать полностью адаптивные макеты без медиа-запросов.
  • Управлять шириной, отступами и порядком колонок на разных устройствах.
  • Динамически показывать или скрывать контент в зависимости от экрана.
  • Обеспечивать кроссбраузерную и кроссплатформенную совместимость макета.

Такой подход делает сетку гибкой, масштабируемой и удобной для поддержки больших приложений.

Оглавление