Grid и система сеток Carbon

Сетка в Carbon Components Svelte строится на 12-колоночной системе, обеспечивая гибкое распределение пространства и упрощая адаптивную верстку. Каждая строка (Row) состоит из колонок (Column), ширина которых задаётся в долях от общей сетки. Это позволяет легко управлять расположением элементов на разных разрешениях экрана.

Ключевые особенности сетки:

  • Гибкость: Колонки автоматически подстраиваются под размеры экрана.
  • Адаптивность: Возможность задавать разные размеры колонок для различных брейкпоинтов.
  • Выравнивание: Поддержка горизонтального и вертикального выравнивания содержимого.

Компоненты Grid, Row и Column

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




  
    
      Контент колонки
  • sm, md, lg – задают ширину колонок для различных точек останова (small, medium, large).
  • Значения указываются в колонках из 12, например, sm={4} занимает 4 из 12 колонок на маленьких экранах.

Управление колонками и брейкпоинтами

Система сеток Carbon поддерживает мобильный подход “mobile-first”. Это значит, что начальная конфигурация задается для маленьких экранов (sm), а для более крупных экранов можно расширять через md и lg.

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


  Контент
  • На маленьком экране колонка занимает всю ширину (12/12).
  • На средних экранах – половину (6/12).
  • На больших – треть ширины (4/12).

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

Вертикальное и горизонтальное выравнивание осуществляется через свойства align и justify у компонента Row.


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

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

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


  
    
      
        
          Вложенная 1
          Вложенная 2
        
      
    
    Основная колонка

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

Пробелы и отступы

Компоненты Row и Column автоматически учитывают отступы и gutter. Column содержит внутренние паддинги для разделения контента, а Row задает горизонтальные промежутки между колонками.

Пример настройки gutter:


  Колонка 1
  Колонка 2
  • Значения gutter могут быть none, small, medium, large.
  • Это упрощает создание аккуратного и читаемого макета без ручного управления отступами.

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

  • Использовать 12-колоночную систему для максимальной гибкости.
  • Задавать размеры колонок для нескольких брейкпоинтов сразу, чтобы сетка оставалась адаптивной.
  • Вложенные Grid применять только для сложных макетов, чтобы не перегружать структуру.
  • Gutter и отступы использовать в соответствии с визуальной иерархией контента.
  • Выравнивание применять осознанно: горизонтальное выравнивание чаще всего отвечает за распределение колонок, вертикальное – за контент внутри них.
Оглавление