Grid Component UDRs

The following section explains the UDRs that can be used to create a grid component.

1 Grid UDR
2 GridColumn UDR
3 GridRow UDR

Grid UDR

The Grid UDR is the first UDR that is required to make a layout with rows and columns.

The following fields are included in the Grid UDR:

Field	Description

Field	Description
attributes (map<string,string>)	This field may contain extra attributes to be added.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. For example, to align all components in the middle `text-center` can be added.
id (string)	This field may contain the id of the component
rows (list<GridRowUDR>)	This field contains a list of `GridRow` UDRs.

GridColumn UDR

The GridColumn UDR is used to create a column inside a GridRow.

To design the grid there is a width field that can have a value from 1-12. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (example, 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing. See example:

The following fields are included in the GridColumn UDR:

Field	Description

Field	Description
attributes (map<string,string>)	This field may contain extra attributes to be added.
breakPoint (string)	This field may contain a break point that is widths that determine how your responsive layout behaves across device or viewport sizes. Possible values are: sm (small >= 576px), md (medium >= 768px), lg (large >=992px), xl (extra large >= 1200px) and xxl (extra extra large >=1400px) Please read more on Bootstrap.
components (list<ComponentUDR>)	This field contain a list of child components, the components that will present in the column.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
id (string)	This field may contain the id of the component
width (int)	This field may contain a width value. Possible values are 1-12. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (e.g., 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing. Default is auto, the column will take as much as it get.

GridRow UDR

The GridRow UDR is used to create a grid row with one or many columns.

The following fields are included in the GridRow UDR:

Field	Description

Field	Description
columns (list<GridColumnUDR>)	This field contain a list of GridColumn UDRs.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.