Grid (Row и Col)

Сеточная система в Ant Design строится на концепции 12-колоночной сетки, аналогично Bootstrap. Она позволяет создавать адаптивные макеты, управлять расположением элементов на странице и обеспечивать гибкость в работе с различными разрешениями экранов.

Row

Row представляет собой контейнер для строк, в которых располагаются колонки (Col). Основные свойства Row:

  • gutter – задает расстояние между колонками. Может быть числом (одинаковый отступ по горизонтали) или массивом [horizontal, vertical] для задания горизонтального и вертикального отступа.
import { Row, Col } from 'antd';

<Row gutter={[16, 24]}>
  <Col span={6}>Колонка 1</Col>
  <Col span={6}>Колонка 2</Col>
  <Col span={6}>Колонка 3</Col>
  <Col span={6}>Колонка 4</Col>
</Row>

  • justify – задает горизонтальное выравнивание колонок. Возможные значения:

    • start – выравнивание по левому краю (по умолчанию)
    • end – по правому краю
    • center – по центру
    • space-between – равномерное распределение с максимальным расстоянием между колонками
    • space-around – равномерное распределение с отступами по бокам
<Row justify="center">
  <Col span={8}>Центрированная колонка</Col>
</Row>

  • align – вертикальное выравнивание колонок внутри строки:

    • top – по верхнему краю
    • middle – по центру
    • bottom – по нижнему краю
<Row align="middle" style={{ height: 100 }}>
  <Col span={6}>Средняя вертикальная колонка</Col>
  <Col span={6}>Средняя вертикальная колонка</Col>
</Row>

Col

Col используется для создания колонок внутри Row. Основное свойство:

  • span – количество колонок, занимаемых элементом (от 1 до 24 по умолчанию). В Ant Design 1 колонка равна 1/24 ширины контейнера.
<Row>
  <Col span={12}>50% ширины</Col>
  <Col span={12}>50% ширины</Col>
</Row>

Дополнительные свойства Col

  • offset – смещение колонки на указанное количество колонок:
<Col span={8} offset={8}>Сместилось на 8 колонок вправо</Col>
  • order – порядок отображения колонки, можно использовать для перестановки без изменения DOM:
<Col span={8} order={2}>Вторая колонка</Col>
<Col span={8} order={1}>Первая колонка</Col>
  • push и pull – сдвиг колонок вправо или влево соответственно, используется для перестановки в сетке:
<Col span={6} push={6}>Сдвинута вправо</Col>
<Col span={6} pull={6}>Сдвинута влево</Col>

Адаптивная сетка

Ant Design поддерживает адаптивные настройки через свойства xs, sm, md, lg, xl, xxl, которые задают span, offset, order и другие параметры для разных размеров экранов. Это позволяет создавать макеты, корректно отображающиеся на мобильных и десктопных устройствах.

<Row gutter={16}>
  <Col xs={24} sm={12} md={8} lg={6}>Адаптивная колонка</Col>
  <Col xs={24} sm={12} md={8} lg={6}>Адаптивная колонка</Col>
</Row>
  • xs – <576px
  • sm – ≥576px
  • md – ≥768px
  • lg – ≥992px
  • xl – ≥1200px
  • xxl – ≥1600px

Для каждого брейкпоинта можно задавать объект с параметрами:

<Col
  xs={{ span: 24, offset: 0 }}
  sm={{ span: 12, offset: 0 }}
  md={{ span: 8, offset: 4 }}
>
  Колонка с разными параметрами
</Col>

Гибкость и вложенность

Колонки можно вкладывать друг в друга, создавая сложные структуры:

<Row gutter={16}>
  <Col span={12}>
    <Row gutter={8}>
      <Col span={12}>Вложенная колонка 1</Col>
      <Col span={12}>Вложенная колонка 2</Col>
    </Row>
  </Col>
  <Col span={12}>Основная колонка</Col>
</Row>

Практические рекомендации

  • Использовать gutter для создания визуального разделения и улучшения читаемости макета.
  • Адаптивность через брейкпоинты обеспечивает корректное отображение на всех устройствах.
  • Смещение и порядок помогают реализовать сложные макеты без изменения DOM.
  • Вложенные строки позволяют создавать гибкие иерархические структуры элементов.

Сеточная система Ant Design сочетает простоту и мощность, позволяя легко управлять макетом, создавая как простые, так и сложные интерфейсы.

Оглавление