Гибкие отступы (gutter)

В Element Plus управление пространством между компонентами сетки осуществляется с помощью свойства gutter в контейнерах el-row. Оно определяет горизонтальные отступы между колонками el-col и позволяет создавать адаптивные и аккуратные макеты без необходимости ручного добавления CSS-паддингов.

<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>

В этом примере создаются три колонки с равномерными отступами в 20 пикселей. Свойство gutter может быть задано как числовое значение, так и объект с ключами для адаптивной верстки.

Использование адаптивных отступов

Для поддержки различных размеров экранов gutter может принимать объект с указанием отступов для разных брейкпоинтов:

<el-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
  <el-col :span="6">Колонка A</el-col>
  <el-col :span="6">Колонка B</el-col>
  <el-col :span="6">Колонка C</el-col>
  <el-col :span="6">Колонка D</el-col>
</el-row>
  • xs — экраны < 576px
  • sm — экраны ≥ 576px
  • md — экраны ≥ 768px
  • lg — экраны ≥ 992px

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

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

Каждая колонка получает половину значения gutter с обеих сторон через CSS-паддинги. Это гарантирует, что суммарное расстояние между колонками соответствует заданному значению gutter:

/* При gutter = 20px */
.el-row {
  margin-left: -10px;
  margin-right: -10px;
}
.el-col {
  padding-left: 10px;
  padding-right: 10px;
}

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

Динамическое управление отступами

Свойство gutter можно задавать динамически через реактивные переменные Vue, что особенно полезно для адаптивных интерфейсов и макетов, меняющихся в зависимости от состояния приложения:

<script setup>
import { ref } from 'vue'

const gutterSize = ref(16)
</script>

<el-row :gutter="gutterSize">
  <el-col :span="12">Левая колонка</el-col>
  <el-col :span="12">Правая колонка</el-col>
</el-row>

<el-button @click="gutterSize.value += 8">Увеличить отступ</el-button>

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

Вертикальные отступы с помощью gutter

Стандартный gutter управляет только горизонтальными отступами, но Element Plus поддерживает вертикальные отступы через свойство row-gap в CSS или при использовании сетки с flex-контейнером:

<el-row :gutter="20" style="row-gap: 30px;">
  <el-col :span="8">Верхняя колонка</el-col>
  <el-col :span="8">Средняя колонка</el-col>
  <el-col :span="8">Нижняя колонка</el-col>
</el-row>

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

Сочетание с вложенными строками

Гибкие отступы сохраняются при вложенных el-row, что позволяет создавать сложные макеты с контролем пространства на всех уровнях:

<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>

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

Ключевые моменты использования gutter

  • Значение gutter задается в пикселях и определяет горизонтальные отступы между колонками.
  • Адаптивный объект позволяет менять отступы в зависимости от размера экрана.
  • Колонки автоматически получают половину gutter в качестве боковых паддингов.
  • Вертикальные отступы управляются через CSS row-gap.
  • Гибкие отступы сохраняются при вложенных строках, что упрощает построение сложных макетов.

Эти принципы делают Element Plus мощным инструментом для создания аккуратных и гибких интерфейсов без необходимости ручного управления пространством между элементами.

Оглавление