FlexGrid для гибких лейаутов

FlexGrid в библиотеке Carbon Components Svelte представляет собой мощный инструмент для создания адаптивных и гибких макетов, основанных на концепции CSS Flexbox. Основное преимущество FlexGrid — возможность быстро и эффективно управлять структурой интерфейса, не прибегая к сложным CSS-правилам.

Основные компоненты

В Carbon Components Svelte FlexGrid реализован через два ключевых компонента:

  1. Grid — контейнер, задающий сетку и её общие параметры.
  2. Column — элемент сетки, который размещается внутри Grid и определяет ширину, отступы и выравнивание контента.
Grid

Компонент Grid принимает несколько важных свойств:

  • condensed (boolean) — уменьшает горизонтальные отступы между колонками.
  • fullWidth (boolean) — сетка занимает всю ширину родительского контейнера.
  • narrow (boolean) — уменьшает внутренние отступы сетки для компактных интерфейсов.

Пример использования:

<Grid fullWidth>
  <Column>
    Контент первой колонки
  </Column>
  <Column>
    Контент второй колонки
  </Column>
</Grid>
Column

Компонент Column позволяет управлять шириной и расположением элементов внутри сетки. Основные свойства:

  • sm, md, lg, xlg, max — задают количество колонок, которые занимает элемент на различных размерах экрана. Значение передается числом от 1 до 16.
  • offset — смещение колонки вправо на указанное количество колонок.
  • start / end — задают порядок отображения колонки в сетке.

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

<Column sm={4} md={8} lg={6}>
  Адаптивная колонка
</Column>

В этом примере на маленьких экранах колонка занимает 4 из 16 колонок, на средних — 8, на больших — 6.

Адаптивность и медиа-запросы

FlexGrid полностью поддерживает адаптивные интерфейсы. Для каждого размера экрана можно задавать индивидуальное поведение колонок. Размеры экрана соответствуют стандартным точкам перелома Carbon Design System:

  • sm — мобильные устройства (0–480px)
  • md — планшеты (481–1056px)
  • lg — десктопы (1057–1312px)
  • xlg — большие десктопы (1313–1584px)
  • max — максимальная ширина (1585px+)

Пример комбинации:

<Grid>
  <Column sm={8} md={4} lg={6}>
    Контент первой колонки
  </Column>
  <Column sm={8} md={12} lg={10}>
    Контент второй колонки
  </Column>
</Grid>

В этом примере сетка автоматически перестраивается под размер экрана, сохраняя гармоничное расположение элементов.

Выравнивание и порядок элементов

FlexGrid наследует возможности Flexbox, что позволяет управлять расположением колонок через выравнивание и порядок:

  • align — вертикальное выравнивание (start, center, end, stretch).
  • justify — горизонтальное распределение (start, center, end, between, around).

Пример горизонтального центрирования колонок:

<Grid justify="center">
  <Column sm={4}>
    Колонка 1
  </Column>
  <Column sm={4}>
    Колонка 2
  </Column>
</Grid>

Комбинирование колонок и вложенных сеток

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

<Grid>
  <Column sm={8}>
    Основной контент
    <Grid condensed>
      <Column sm={4}>Вложенная колонка 1</Column>
      <Column sm={4}>Вложенная колонка 2</Column>
    </Grid>
  </Column>
  <Column sm={8}>
    Дополнительный контент
  </Column>
</Grid>

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

  • Использовать fullWidth для макетов, которые должны занимать всю ширину экрана, а condensed — для плотного размещения элементов.
  • Для адаптивных интерфейсов всегда задавать размеры колонок для нескольких брейкпоинтов (sm, md, lg).
  • При сложных макетах рекомендуется комбинировать вложенные сетки с отступами через offset и start/end.
  • FlexGrid идеально подходит для построения интерфейсов с динамическим содержимым, где количество и ширина элементов могут изменяться.

FlexGrid в Carbon Components Svelte обеспечивает гибкость, структурированность и простоту адаптивного дизайна, позволяя создавать профессиональные интерфейсы с минимальной настройкой CSS.

Оглавление