Вложенные сетки

В Carbon Components Svelte сетки строятся на базе системы Grid, которая позволяет создавать гибкие и отзывчивые макеты. Вложенные сетки применяются для более сложного позиционирования элементов внутри контейнера, сохраняя при этом единый контроль за колонками и отступами. Основной принцип работы вложенных сеток заключается в том, что каждый Grid может содержать внутри себя другой Grid, а его колонки (Column) корректно наследуют размеры и отступы.

Создание базовой сетки

Базовая сетка создаётся с помощью компонента Grid и дочерних компонентов Column. Пример структуры:

<script>
  import { Grid, Column } from 'carbon-components-svelte';
</script>

<Grid>
  <Column sm="4" md="8" lg="4">
    Основной блок
  </Column>
  <Column sm="4" md="8" lg="8">
    Второй блок
  </Column>
</Grid>

Здесь параметры sm, md, lg указывают ширину колонки в сетке для разных размеров экрана. sm — маленькие устройства, md — средние, lg — большие.

Вложенные сетки

Вложенные сетки создаются путем размещения Grid внутри Column. Это позволяет разбивать один блок на несколько частей, каждая из которых имеет собственные колонки и отступы.

<Grid>
  <Column sm="12" md="6" lg="6">
    <Grid>
      <Column sm="6" md="6" lg="6">Вложенная колонка 1</Column>
      <Column sm="6" md="6" lg="6">Вложенная колонка 2</Column>
    </Grid>
  </Column>
  <Column sm="12" md="6" lg="6">
    Внешний блок 2
  </Column>
</Grid>

В данном примере внутренняя сетка полностью адаптируется к размерам родительской колонки, сохраняя согласованное поведение при изменении ширины экрана.

Управление отступами и выравниванием

Вложенные сетки наследуют отступы от внешнего Grid, но для точной настройки можно использовать следующие свойства:

  • gap — задаёт промежуток между колонками, принимает значения small, medium, large.
  • align — вертикальное выравнивание содержимого (start, center, end).
  • justify — горизонтальное распределение колонок (start, center, end, between).

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

<Grid gap="medium">
  <Column sm="12" md="6">
    <Grid gap="small" align="center" justify="between">
      <Column sm="6">Элемент A</Column>
      <Column sm="6">Элемент B</Column>
    </Grid>
  </Column>
  <Column sm="12" md="6">Внешний блок 2</Column>
</Grid>

Комплексные вложенные структуры

Сложные интерфейсы могут потребовать нескольких уровней вложенности. Для таких случаев важно соблюдать правило: каждая новая сетка создаётся внутри Column, а не внутри Grid. Это позволяет избежать конфликтов ширины и выравнивания.

<Grid>
  <Column sm="12">
    <Grid>
      <Column sm="6">
        <Grid>
          <Column sm="12">Уровень 3, элемент 1</Column>
          <Column sm="12">Уровень 3, элемент 2</Column>
        </Grid>
      </Column>
      <Column sm="6">
        <Grid>
          <Column sm="12">Уровень 3, элемент 3</Column>
          <Column sm="12">Уровень 3, элемент 4</Column>
        </Grid>
      </Column>
    </Grid>
  </Column>
</Grid>

При таком подходе каждый уровень вложенности остаётся полностью отзывчивым, а структура остаётся читаемой и поддерживаемой.

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

  • Не создавать более 3–4 уровней вложенности без необходимости — сложные макеты легче реализовать через комбинирование Grid с компонентами Stack и Tile.
  • Для вложенных сеток можно задавать разные gap для внешней и внутренней сетки, чтобы визуально отделять группы элементов.
  • Следить за согласованностью размеров колонок на разных уровнях вложенности, чтобы не нарушать адаптивность интерфейса.

Вложенные сетки Carbon Components Svelte позволяют гибко управлять сложными макетами, сохраняя адаптивность, согласованность и читаемость кода. Их правильное использование особенно важно при построении интерфейсов с множеством блоков и компонентных комбинаций.

Оглавление