Модульные сетки

Как видно на скриншоте выше в редакторе предусмотрена работа с колонками, однако по умолчанию классы для колонок отсутствуют, чтобы их добавить требуется создать файл с дополнительными настройками редактора

подробнее тут https://github.com/andreyryabin/sprint.editor/wiki/Settings

в этот файл можно записать ваши классы для сеток и они отобразятся в виде выпадающей панельки у колонок

1. создайте файл с настройками классов для колонок, например myproject123.php и положите его в bitrix/admin/sprint.editor/settings/ или в local/admin/sprint.editor/settings/

2. добавьте ваши классы для колонок по аналогии с примером

$settings = array(
    'title' => 'Пример настройки для bootstrap',

    'layout_classes' => array(
        'type1' => array(
            array('col-md-8', 'col-md-9', 'col-md-12'),
            array('col-sm-8', 'col-sm-9', 'col-sm-12'),
            array('col-xs-8', 'col-xs-9', 'col-xs-12'),
            array('col-lg-8', 'col-lg-9', 'col-lg-12'),
        ),
        'type2' => array(
            array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9'),
            array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9'),
            array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9'),
            array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9'),
        ),
        'type3' => array(
            array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8'),
            array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8'),
            array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8'),
            array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8'),
        ),
        'type4' => array(
            array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7'),
            array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7'),
            array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7'),
            array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7'),
        ),
    ),

    'layout_defaults' => array(
        'type1' => '',
        'type2' => 'col-md-6',
        'type3' => 'col-md-4',
        'type4' => 'col-md-3',
    ),

);

где layout_classes - список возможных классов для колонк в сетке layout_defaults - классы которые добавляются к колонками по умолчанию при создании сетки

type1 - одноколоночная сетка, type2 - двухколоночная и т.д.

3. подключите этот файл к редактору и не забудьте сохранить свойство и инфоблок

После этого панелька с классами для колонок будет отображена в редакторе

p.s.

Если у вас подключен bootstrap в публичной части сайта можете использовать готовые настройки блоков или создать свои

Система сеток Bootstrap имеет 12 колонок и является адаптивной, то есть колонки будут перестраиватся автоматически при изменении разрешения экрана.

Система сеток Bootstrap имеет 4 класса:

• xs - мобильные телефоны (mobile)
• sm - планшеты (tablet)
• md - компьютеры (desktop)
• lg - компьютеры с большим монитором (large desktop)

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

Обратите внимате на то что общая сумма колонок в ряду должна ровнятся 12.

Подробнее:

http://promo-creative.com/sistema-setok.html

http://getbootstrap.com/css/#grid