Компонент GridContainer

@Input rows, columns

Определяет ширину и высоту колонки сетки макета.

Пример настройки свойств columns и rows приведен ниже.

{
    ...
    "columns": [
        "298px",
        "minmax(64px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    ...
}

Свойства CSS Grid Layout, которые не поддерживает компонент GridContainer:

• grid-line-name — именованные линии.
• fit-content() — ограничивает ширину колонки. Представляет собой формулу min(max-content, max(auto, argument)), которая вычисляется, как свойство auto (т. е. minmax(auto, max-content)). Размер поля ограничен значением параметра argument, если он больше минимального значения, заданного в свойстве auto. В Creatio при любом заданном значении свойства fit-content() создается одна колонка шириной 32px.
• repeat() — повторяющийся фрагмент перечня строк, который в компактной форме позволяет записать строки с повторяющимся шаблоном.

@Input justifyItems

Выравнивание по горизонтали. Указывает как браузер распределяет пространство между и вокруг элементов контента вдоль строчной оси grid-контейнера.

Возможные значения

start	Выравнивание элементов внутри блока по левому краю.
end	Выравнивание элементов внутри блока по правому краю.
center	Выравнивание элементов внутри блока по центру.
stretch	Выравнивание элементов внутри блока по ширине.

Пример настройки свойства justify-items приведен ниже.

.container {
    justify-items: start | end | center | stretch;
}

@Input alignItems

Выравнивание по вертикали. Выравнивание элементов внутри блока вдоль соответствующей оси.

Возможные значения

start	Выравнивание элементов внутри блока по верхнему краю.
end	Выравнивание элементов внутри блока по нижнему краю.
center	Выравнивание элементов внутри блока по центру.
stretch	Выравнивание элементов внутри блока по ширине.

Пример настройки свойства align-items приведен ниже.

.container {
    align-items: start | end | center | stretch;
}

@Input gap

Задает отступы между элементами grid-контейнера в столбцах и строках. Является сокращением для свойств row-gap (отступ между элементами строки) и column-gap (отступ между элементами столбца).

Результат настройки свойств row-gap и column-gap приведен ниже.

.container {
    grid-template-columns: 100px auto;
    grid-template-rows: 80px 60px;
    column-gap: 40px;
    row-gap: 20px;
}

Результат отображения представлен на рисунке ниже.

@Input padding

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

Пример настройки свойства padding приведен ниже.

"padding": {
    "top": "6px",
    "right": 6,
    "bottom": "small",
    "left": "large"
}

@Input border-radius

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

Пример настройки свойства border-radius приведен ниже.

"borderRadius": "medium"

@Input color

Задает цвет контейнера. В качестве значения принимает код цвета.

Пример настройки свойства color приведен ниже.

"color": "#FDAB06"

Пример использования компонента GridContainer в схеме представлен ниже.

"name": "GridContainer",
"values": {
    "layoutConfig": {...},
    "type": "crt.GridContainer",
    "columns": [
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    "gap": {
        "columnGap": "large"
    },
    "items": []
}
...
{
    "operation": "insert",
    "name": "Button",
    "values": {
        "layoutConfig": {
            "column": 1,
            "row": 1,
            "colSpan": 3,
            "rowSpan": 1
        },
        "type": "crt.Button",
        "caption": "#ResourceString(Button_caption)#",
        "color": "default",
    },
    "parentName": "GridContainer",
    "propertyName": "Items",
    "index": 0
}