Gutter и отступы

Gutter в библиотеке Carbon Components Svelte представляет собой пространство между колонками в сеточной системе. Основная задача gutter — создать визуальное разделение элементов интерфейса и обеспечить правильное распределение контента при адаптивной верстке. В Svelte компонентах Carbon сетки и колонки обладают встроенными свойствами для управления gutter, что упрощает разработку сложных макетов.

Настройка gutter в контейнере

Контейнеры (Grid и Column) в Carbon Svelte используют свойство gutter для задания промежутка между колонками. Синтаксис следующий:

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

<Grid gutter="2rem">
  <Column sm="4" md="8" lg="4">
    Контент первой колонки
  </Column>
  <Column sm="4" md="8" lg="4">
    Контент второй колонки
  </Column>
</Grid>
  • gutter принимает значения в единицах CSS (px, rem, %) и определяет горизонтальное пространство между колонками.
  • При изменении ширины экрана, gutter сохраняет пропорциональность, что важно для адаптивного дизайна.

Влияние gutter на колонки

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

  • Колонки получают внутренние padding, равные половине gutter, чтобы общий промежуток между колонками соответствовал указанному значению gutter.
  • Для вертикальных отступов используется отдельное свойство rowGap в контейнере Grid:
<Grid gutter="2rem" rowGap="1.5rem">
  <Column sm="4">
    Верхняя колонка
  </Column>
  <Column sm="4">
    Нижняя колонка
  </Column>
</Grid>

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

Carbon Svelte позволяет настраивать отдельные колонки с помощью свойств padding, margin и модификаторов размера (sm, md, lg). Это полезно, когда нужно изменить визуальное распределение контента внутри одной колонки, не меняя общий gutter.

<Column sm="4" style="padding-left: 1rem; padding-right: 1rem;">
  Колонка с индивидуальными отступами
</Column>

Адаптивность gutter

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

<Grid gutter={{ sm: '1rem', md: '2rem', lg: '3rem' }}>
  <Column sm="4" md="8" lg="4">
    Контент
  </Column>
</Grid>
  • sm — малые экраны, md — средние, lg — большие.
  • Такой подход позволяет создавать сетку, которая выглядит гармонично на любом устройстве.

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

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

<Grid gutter="2rem">
  <Column sm="8">
    Основной контент
    <Grid gutter="1rem">
      <Column sm="4">Вложенная колонка 1</Column>
      <Column sm="4">Вложенная колонка 2</Column>
    </Grid>
  </Column>
  <Column sm="4">Боковая колонка</Column>
</Grid>
  • Внутренние сетки наследуют только структуру, но не значения gutter.
  • Это позволяет гибко управлять отступами без глобальной корректировки внешнего контейнера.

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

  • Использовать единообразные единицы измерения (rem или %) для consistency.
  • Не задавать одинаковые значения padding и gutter вручную на колонках — это может привести к двойным отступам.
  • При необходимости визуального уменьшения расстояния между отдельными элементами использовать margin на контенте внутри колонок, а не изменять gutter глобально.

Свойство condensed

Для компактных макетов доступно свойство condensed у контейнера Grid:

<Grid condensed>
  <Column sm="4">Контент</Column>
  <Column sm="4">Контент</Column>
</Grid>
  • condensed уменьшает стандартный gutter, делая макет более плотным, что удобно для панелей инструментов, таблиц или панелей с большим количеством элементов.

Итоговая структура работы с отступами

  1. Gutter задается на Grid и определяет горизонтальное пространство между колонками.
  2. rowGap регулирует вертикальные отступы между рядами.
  3. Padding/margin на колонках используются для тонкой настройки отдельных элементов.
  4. Адаптивные значения gutter обеспечивают корректное отображение на разных устройствах.
  5. Вложенные сетки могут иметь свои собственные gutter и rowGap, независимые от родительской сетки.
  6. Condensed Grid применяется для плотного расположения элементов.

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

Оглавление