A layout control, used to create full page layouts or user interface elements.
A two-dimensional layout control based on the native-browser CSS display grid which can handle both columns and rows. The control can be used along with sap.m.FlexBox which is the one-dimensional alternative for layouting.
With properties it is possible to define:
The dimensions of the grid items are defined on a CSSGrid
level. Every item can override its size by specifying how many columns and/or rows it will take in the CSSGrid
. Every item can override its position by specifying from which column and/or row it will start. The configuration of a single item is done with GridItemLayoutData.
gridTemplateColumns
and gridTemplateRows
. The grid also creates rows and columns on its own when needed. Their dimensions are defined with gridAutoColumns
and gridAutoRows
. The CSSGrid
has the following elements:
items
- The items of the CSSGrid
customLayout
- An aggregation used to pass the CSSGrid
configuration. Used for templating.For general cases, use the CSSGrid
properties to configure how the layout should look. For Box case (equal sized items), use customLayout
aggregation with GridBoxLayout For Grids which need different configurations based on available width, use customLayout
aggregation with GridResponsiveLayout To set a specific position to an item or define its dimensions in the grid, pass layoutData
of type GridItemLayoutData
When to use
When not to use
customLayout
aggregation of the CSSGrid
and configure how it will look in different breakpoints (S, M, L, XL).
Constructor for a new CSSGrid.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.ui.layout.cssgrid.CSSGrid(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
gridAutoColumns | sap.ui.layout.cssgrid.CSSGridTrack | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-auto-columns
|
gridAutoFlow | sap.ui.layout.cssgrid.CSSGridAutoFlow | Row | Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow
|
gridAutoRows | sap.ui.layout.cssgrid.CSSGridTrack | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows
|
gridColumnGap | sap.ui.core.CSSSize | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-column-gap
|
gridGap | sap.ui.layout.cssgrid.CSSGridGapShortHand | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-gap
|
gridRowGap | sap.ui.core.CSSSize | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-row-gap
|
gridTemplateColumns | sap.ui.layout.cssgrid.CSSGridTrack | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-template-columns
|
gridTemplateRows | sap.ui.layout.cssgrid.CSSGridTrack | empty string | Sets the value for the CSS display:grid property MDN web docs: grid-template-rows
|
width | sap.ui.core.CSSSize | 100% | The width of the control Visibility: public |
Default Aggregation: items
Name | Cardinality | Type | Description |
---|---|---|---|
customLayout | 0..1 | sap.ui.layout.cssgrid.GridLayoutBase |
Defines a custom Grid layout for the control. If provided, it will override all of the grid properties. |
items (default) | 0..n | sap.ui.core.Control |
The items contained by the control. |
Method | Description |
---|---|
addItem |
Adds some item to the aggregation items. |
destroyCustomLayout |
Destroys the customLayout in the aggregation customLayout. |
destroyItems |
Destroys all the items in the aggregation items. |
sap.ui.layout.cssgrid.CSSGrid.extend |
Creates a new subclass of class sap.ui.layout.cssgrid.CSSGrid with name
|
getCustomLayout |
Gets content of aggregation customLayout. Defines a custom Grid layout for the control. If provided, it will override all of the grid properties. |
getGridAutoColumns |
Gets current value of property gridAutoColumns. Sets the value for the CSS display:grid property MDN web docs: grid-auto-columns
Default value is |
getGridAutoFlow |
Gets current value of property gridAutoFlow. Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow
Default value is |
getGridAutoRows |
Gets current value of property gridAutoRows. Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows
Default value is |
getGridColumnGap |
Gets current value of property gridColumnGap. Sets the value for the CSS display:grid property MDN web docs: grid-column-gap
Default value is |
getGridDomRefs |
Implements IGridConfigurable interface |
getGridGap |
Gets current value of property gridGap. Sets the value for the CSS display:grid property MDN web docs: grid-gap
Default value is |
getGridLayoutConfiguration |
Returns the layout configuration of the |
getGridRowGap |
Gets current value of property gridRowGap. Sets the value for the CSS display:grid property MDN web docs: grid-row-gap
Default value is |
getGridTemplateColumns |
Gets current value of property gridTemplateColumns. Sets the value for the CSS display:grid property MDN web docs: grid-template-columns
Default value is |
getGridTemplateRows |
Gets current value of property gridTemplateRows. Sets the value for the CSS display:grid property MDN web docs: grid-template-rows
Default value is |
getItems |
Gets content of aggregation items. The items contained by the control. |
sap.ui.layout.cssgrid.CSSGrid.getMetadata |
Returns a metadata object for class sap.ui.layout.cssgrid.CSSGrid. |
getWidth |
Gets current value of property width. The width of the control Default value is |
indexOfItem |
Checks for the provided |
insertItem |
Inserts a item into the aggregation items. |
removeAllItems |
Removes all the controls from the aggregation items. Additionally, it unregisters them from the hosting UIArea. |
removeItem |
Removes a item from the aggregation items. |
setCustomLayout |
Sets the aggregated customLayout. |
setGridAutoColumns |
Sets a new value for property gridAutoColumns. Sets the value for the CSS display:grid property MDN web docs: grid-auto-columns
When called with a value of Default value is |
setGridAutoFlow |
Sets a new value for property gridAutoFlow. Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow
When called with a value of Default value is |
setGridAutoRows |
Sets a new value for property gridAutoRows. Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows
When called with a value of Default value is |
setGridColumnGap |
Sets a new value for property gridColumnGap. Sets the value for the CSS display:grid property MDN web docs: grid-column-gap
When called with a value of Default value is |
setGridGap |
Sets a new value for property gridGap. Sets the value for the CSS display:grid property MDN web docs: grid-gap
When called with a value of Default value is |
setGridRowGap |
Sets a new value for property gridRowGap. Sets the value for the CSS display:grid property MDN web docs: grid-row-gap
When called with a value of Default value is |
setGridTemplateColumns |
Sets a new value for property gridTemplateColumns. Sets the value for the CSS display:grid property MDN web docs: grid-template-columns
When called with a value of Default value is |
setGridTemplateRows |
Sets a new value for property gridTemplateRows. Sets the value for the CSS display:grid property MDN web docs: grid-template-rows
When called with a value of Default value is |
setWidth |
Sets a new value for property width. The width of the control When called with a value of Default value is |
Adds some item to the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.ui.core.Control |
The item to add; if empty, nothing is inserted |
Creates a new subclass of class sap.ui.layout.cssgrid.CSSGrid with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Gets content of aggregation customLayout.
Defines a custom Grid layout for the control. If provided, it will override all of the grid properties.
Gets current value of property gridAutoColumns.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-columns
Default value is empty string
.
Gets current value of property gridAutoFlow.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow
Default value is "Row"
.
Gets current value of property gridAutoRows.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows
Default value is empty string
.
Gets current value of property gridColumnGap.
Sets the value for the CSS display:grid property MDN web docs: grid-column-gap
Default value is empty string
.
Gets current value of property gridGap.
Sets the value for the CSS display:grid property MDN web docs: grid-gap
It is a shorthand for gridRowGap and gridColumnGap. If some of them is set, the gridGap value will have less priority and will be overwritten.
Default value is empty string
.
Gets current value of property gridRowGap.
Sets the value for the CSS display:grid property MDN web docs: grid-row-gap
Default value is empty string
.
Gets current value of property gridTemplateColumns.
Sets the value for the CSS display:grid property MDN web docs: grid-template-columns
Default value is empty string
.
Gets current value of property gridTemplateRows.
Sets the value for the CSS display:grid property MDN web docs: grid-template-rows
Default value is empty string
.
Returns a metadata object for class sap.ui.layout.cssgrid.CSSGrid.
Checks for the provided sap.ui.core.Control
in the aggregation items. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.ui.core.Control |
The item whose index is looked for |
Inserts a item into the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.ui.core.Control |
The item to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation items.
Additionally, it unregisters them from the hosting UIArea.
Removes a item from the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
vItem | int string sap.ui.core.Control |
The item to remove or its index or id |
Sets the aggregated customLayout.
Param | Type | DefaultValue | Description |
---|---|---|---|
oCustomLayout | sap.ui.layout.cssgrid.GridLayoutBase |
The customLayout to set |
Sets a new value for property gridAutoColumns.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-columns
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridAutoColumns | sap.ui.layout.cssgrid.CSSGridTrack | "" |
New value for property |
Sets a new value for property gridAutoFlow.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "Row"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridAutoFlow | sap.ui.layout.cssgrid.CSSGridAutoFlow | "Row" |
New value for property |
Sets a new value for property gridAutoRows.
Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridAutoRows | sap.ui.layout.cssgrid.CSSGridTrack | "" |
New value for property |
Sets a new value for property gridColumnGap.
Sets the value for the CSS display:grid property MDN web docs: grid-column-gap
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridColumnGap | sap.ui.core.CSSSize | "" |
New value for property |
Sets a new value for property gridGap.
Sets the value for the CSS display:grid property MDN web docs: grid-gap
It is a shorthand for gridRowGap and gridColumnGap. If some of them is set, the gridGap value will have less priority and will be overwritten.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridGap | sap.ui.layout.cssgrid.CSSGridGapShortHand | "" |
New value for property |
Sets a new value for property gridRowGap.
Sets the value for the CSS display:grid property MDN web docs: grid-row-gap
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridRowGap | sap.ui.core.CSSSize | "" |
New value for property |
Sets a new value for property gridTemplateColumns.
Sets the value for the CSS display:grid property MDN web docs: grid-template-columns
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridTemplateColumns | sap.ui.layout.cssgrid.CSSGridTrack | "" |
New value for property |
Sets a new value for property gridTemplateRows.
Sets the value for the CSS display:grid property MDN web docs: grid-template-rows
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGridTemplateRows | sap.ui.layout.cssgrid.CSSGridTrack | "" |
New value for property |
Sets a new value for property width.
The width of the control
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "100%"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sWidth | sap.ui.core.CSSSize | "100%" |
New value for property |