Основы Grid системы

Grid система в Element Plus представляет собой инструмент для создания адаптивной сетки, позволяющей гибко управлять расположением элементов интерфейса на странице. Она реализована через компоненты el-row и el-col, которые позволяют строить макеты с заданными колонками, отступами и выравниванием.

Компонент el-row

el-row служит контейнером для колонок (el-col) и управляет горизонтальной структурой сетки. Основные свойства:

  • gutter – задаёт горизонтальные и вертикальные отступы между колонками. Может быть числом (px) или массивом [горизонтальный, вертикальный].

    <el-row :gutter="20">
  <el-col :span="8">Колонка 1</el-col>
  <el-col :span="8">Колонка 2</el-col>
  <el-col :span="8">Колонка 3</el-col>
</el-row>

  • type – определяет поведение ряда. Значения:

    • flex – включение Flexbox для управления выравниванием.

  • justify – выравнивание по горизонтали для Flex ряда. Возможные значения: start, center, end, space-between, space-around.

  • align – вертикальное выравнивание для Flex ряда. Возможные значения: top, middle, bottom.

Пример с Flex-выравниванием:

<el-row type="flex" justify="space-between" align="middle">
  <el-col :span="6">Левая</el-col>
  <el-col :span="6">Центр</el-col>
  <el-col :span="6">Правая</el-col>
</el-row>

Компонент el-col

el-col представляет собой отдельную колонку сетки. Основные свойства:

  • span – количество колонок, занимаемых элементом, по умолчанию сетка состоит из 24 частей.
  • offset – смещение колонки вправо на указанное количество частей сетки.
  • push и pull – сдвигают колонку относительно её обычного положения (используется для перестановки при адаптивных макетах).

Пример смещения и перестановки:

<el-row>
  <el-col :span="8" :offset="4">Смещение</el-col>
  <el-col :span="8" :push="4">Сдвиг вправо</el-col>
  <el-col :span="8" :pull="4">Сдвиг влево</el-col>
</el-row>

Адаптивные свойства

Element Plus поддерживает адаптивность сетки, что позволяет задавать разные параметры колонок для различных размеров экранов:

  • xs – мобильные устройства (< 768px)
  • sm – планшеты (≥ 768px)
  • md – небольшие десктопы (≥ 992px)
  • lg – большие десктопы (≥ 1200px)
  • xl – широкие экраны (≥ 1920px)

Каждое свойство принимает объект с span, offset, push и pull.

Пример адаптивной колонки:

<el-row :gutter="20">
  <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:8}" :lg="{span:6}">
    Адаптивная колонка
  </el-col>
</el-row>

Вложенные ряды

Колонки могут содержать вложенные ряды для создания сложных макетов. Внутри вложенного el-row также можно использовать gutter и Flex-свойства.

<el-row :gutter="20">
  <el-col :span="12">
    <el-row :gutter="10">
      <el-col :span="12">Вложенная 1</el-col>
      <el-col :span="12">Вложенная 2</el-col>
    </el-row>
  </el-col>
  <el-col :span="12">Главная колонка</el-col>
</el-row>

Вертикальные отступы и выравнивание

Grid система поддерживает вертикальное выравнивание колонок через свойства align в el-row. Значение top выравнивает по верхнему краю, middle – по центру, bottom – по нижнему краю.

<el-row type="flex" align="middle" :gutter="20">
  <el-col :span="8">Верхняя</el-col>
  <el-col :span="8">Средняя</el-col>
  <el-col :span="8">Нижняя</el-col>
</el-row>

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

  • Использовать gutter для создания пространства между колонками, избегая «слипания» элементов.
  • Для адаптивных макетов задавать свойства xs, sm, md, lg и xl.
  • Вложенные ряды позволяют строить сложные сетки без нарушения общей структуры.
  • Flex-режим полезен при динамическом выравнивании и распределении колонок одинаковой высоты.

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

Оглавление