home chevron_right
Модель: строки/колонки/области, 12-колоночная сетка

Основа — 12-колоночная сетка (брейкпоинты Bootstrap 4)link

Сетка грида опирается на 12-колоночную модель и брейкпоинты Bootstrap-совместимой верстки: колонки могут иметь ширины на разных breakpoint’ах, а при необходимости — скрываться на отдельных размерах экрана. В параметрах компонента это выражается в наборах ширин ...WIDTH_XL|LG|MD|SM|XS, где значение — число колонок (0…12). Ноль используется как “скрыть на этом breakpoint”.

Ниже — фрагмент живой конфигурации view, где видно раздельное управление ширинами на XL/LG/MD/SM/XS и скрытие правой колонки на меньших экранах (ширина 0):

[
    "ROW_4_COL_0_WIDTH_XL" => "8",
    "ROW_4_COL_1_WIDTH_XL" => "4",

    "ROW_4_COL_0_WIDTH_LG" => "8",
    "ROW_4_COL_0_WIDTH_MD" => "12",
    "ROW_4_COL_0_WIDTH_SM" => "12",
    "ROW_4_COL_0_WIDTH_XS" => "12",

    "ROW_4_COL_1_WIDTH_LG" => "4",
    "ROW_4_COL_1_WIDTH_MD" => "0",
    "ROW_4_COL_1_WIDTH_SM" => "0",
    "ROW_4_COL_1_WIDTH_XS" => "0",
]

Внутри колонок размещаются области/блоки: view (набор блоков) и block (конкретный блок) из {site_dir}/simai.data/grid/view и .../blocklink

На уровне данных проекта разделение выглядит так:

  • {site_dir}/simai.data/grid/view/... — “представления областей” (header/footer/sidebar/main/top и т.д.). В примерах это папки, где template.php хранит конфигурацию, обычно через вызов IncludeComponent("simai:sf.grid", ...) с набором параметров строк/колонок/областей.
  • {site_dir}/simai.data/grid/block/<section>/... — “шаблоны областей/блоков” (то, что указывается как ...AREA_k_TEMPLATE). Здесь лежит конкретный вывод и логика блока, который будет вставлен в нужный slot.

Ключевой параметр связки — BLOCK_SECTION: он задаёт секцию блоков (header|footer|home|main|sidebar) и определяет, из какой ветки grid/block будут подбираться AREA_*_TEMPLATE.

Пример того, как view фактически хранит “снимок” сборки (строки + area-шаблоны + параметры блоков):

<?php
$APPLICATION->IncludeComponent(
    "simai:sf.grid",
    ".default",
    [
        "BLOCK_SECTION" => "main",
        "ROW_COUNT" => "3",

        "ROW_0_NAME" => "Баннер",
        "ROW_0_ACTIVE" => "Y",
        "ROW_0_COL_COUNT" => "1",
        "ROW_0_COL_0_AREA_COUNT" => "1",
        "ROW_0_COL_0_AREA_0_TEMPLATE" => "banner.single",

        "ROW_1_NAME" => "Заголовок",
        "ROW_1_ACTIVE" => "Y",
        "ROW_1_COL_COUNT" => "1",
        "ROW_1_COL_0_AREA_COUNT" => "1",
        "ROW_1_COL_0_AREA_0_TEMPLATE" => "page.title",

        // параметры блока banner.single прокидываются через __BANNER_SINGLE__
        "ROW_0_COL_0_AREA_0__BANNER_SINGLE__SECTION_CODE" => "section-top",
        "ROW_0_COL_0_AREA_0__BANNER_SINGLE__USE_FILTER" => "N",
    ],
    false,
    [
        // В примерах проекта видна связка с настройкой grid_edit_mode:
        "HIDE_ICONS" => (Property::getValue(SF_SITE_DIR, "grid_edit_mode") == "Y" ? "N" : "Y"),
    ]
);

Поддержка условий показа/адаптивности: строки/колонки могут иметь ограничения по устройствам, скрытие/отображение, фон/маску/анимациюlink

В гриде есть два практических слоя “условности”:

  1. Условия показа на уровне строки: строка может быть включена/выключена и дополнительно зависеть от свойства/настройки. В конфигурациях проекта это выглядит как ROW_i_USE_CONDITION + триада ...CONDITION_PROPERTY / ...CONDITION_COMPARISON / ...CONDITION_VALUE. В реализации условия завязаны на значения настроек (через механизм свойств), поэтому одна и та же view-конфигурация может по-разному рендериться на разных разделах/страницах.

Пример условия показа строки:

[
    "ROW_2_USE_CONDITION" => "Y",
    "ROW_2_CONDITION_PROPERTY" => "include_top_area",
    "ROW_2_CONDITION_COMPARISON" => "==",
    "ROW_2_CONDITION_VALUE" => "Y",
]
  1. Адаптивность колонок: помимо ширин на breakpoint’ах, в параметрах есть флаг ROW_i_COL_j_ADAPTIVE. Он влияет на то, применяется ли детальная раскладка по XL/LG/MD/SM/XS или используется упрощённая схема (это заметно по логике сборки CSS-классов ширин в компоненте). Дополнительно в параметрах компонента встречаются режимы/флаги уровня “сборщика” (например, ANIMATE_MODE, USE_BACKGROUND, BACKGROUND_TEMPLATE, а также параметры композита COMPOSITE_FRAME_MODE/TYPE), которые управляют общим поведением вывода и окружения строки.

Источники: принципы и паттерны параметров, готовые конфигурации строк/колонок, список view/block и пути к файлам гридаlink

Чтобы разбираться с гридом уверенно, обычно хватает трёх “точек опоры” прямо в проекте:

  • Параметры компонента: /bitrix/components/simai/sf.grid/.parameters.php — оттуда видно, какие ключи ожидаются, какие группы включаются по режимам, как формируются списки BLOCK_SECTION и доступных area-шаблонов.
  • Реальное поведение на выводе: /bitrix/components/simai/sf.grid/component.php — там видно, как читаются ROW_COUNT, ROW_ORDER, условия показа строк, ширины колонок и как формируется итоговая структура для шаблона.
  • Данные проекта: {site_dir}/simai.data/grid/view и {site_dir}/simai.data/grid/block — это то, что вы реально переносите между средами и версионируете: представления областей, шаблоны блоков и их параметры.