class sap.ui.layout.cssgrid.CSSGrid

Visiblity: public
UX Guidelines:
Implements: sap.ui.layout.cssgrid.IGridConfigurable
Available since: N/A
Module: sap/ui/layout/cssgrid/CSSGrid
Application Component: CA-UI5-CTR

A layout control, used to create full page layouts or user interface elements.

Overview

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.

Terminology

Structure

The CSSGrid has the following elements:

Usage

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

Responsive behavior

Current Limitations



Documentation links:

This control can be a drop target.

Constructor

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


Properties

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

Visibility: public
gridAutoFlow sap.ui.layout.cssgrid.CSSGridAutoFlow Row

Sets the value for the CSS display:grid property MDN web docs: grid-auto-flow

Visibility: public
gridAutoRows sap.ui.layout.cssgrid.CSSGridTrack empty string

Sets the value for the CSS display:grid property MDN web docs: grid-auto-rows

Visibility: public
gridColumnGap sap.ui.core.CSSSize empty string

Sets the value for the CSS display:grid property MDN web docs: grid-column-gap

Visibility: public
gridGap sap.ui.layout.cssgrid.CSSGridGapShortHand empty string

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.

Visibility: public
gridRowGap sap.ui.core.CSSSize empty string

Sets the value for the CSS display:grid property MDN web docs: grid-row-gap

Visibility: public
gridTemplateColumns sap.ui.layout.cssgrid.CSSGridTrack empty string

Sets the value for the CSS display:grid property MDN web docs: grid-template-columns

Visibility: public
gridTemplateRows sap.ui.layout.cssgrid.CSSGridTrack empty string

Sets the value for the CSS display:grid property MDN web docs: grid-template-rows

Visibility: public
width sap.ui.core.CSSSize 100%

The width of the control

Visibility: public

Aggregations

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.


Methods Overview

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 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.

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 empty string.

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 "Row".

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 empty string.

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 empty string.

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 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.

getGridLayoutConfiguration

Returns the layout configuration of the CSSGrid.

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 empty string.

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 empty string.

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 empty string.

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 "100%".

indexOfItem

Checks for the provided sap.ui.core.Control in the aggregation items. and returns its index if found or -1 otherwise.

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

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 null or undefined, the default value of the property will be restored.

Default value is "Row".

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

setGridGap

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.

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

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 null or undefined, the default value of the property will be restored.

Default value is empty string.

setWidth

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%".

addItem

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

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 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

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 empty string.

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 "Row".

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 empty string.

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 empty string.

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 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.

getGridLayoutConfiguration

Returns the layout configuration of the CSSGrid.

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 empty string.

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 empty string.

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 empty string.

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 "100%".

indexOfItem

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

insertItem

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 0-based index the item should be inserted at; for a negative value of iIndex, the item is inserted at position 0; for a value greater than the current size of the aggregation, the item is inserted at the last position

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.

Param Type DefaultValue Description
vItem int string sap.ui.core.Control

The item to remove or its index or id

setCustomLayout

Sets the aggregated customLayout.

Param Type DefaultValue Description
oCustomLayout sap.ui.layout.cssgrid.GridLayoutBase

The customLayout to set

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 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 gridAutoColumns

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 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 gridAutoFlow

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 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 gridAutoRows

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 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 gridColumnGap

setGridGap

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 gridGap

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 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 gridRowGap

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 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 gridTemplateColumns

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 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 gridTemplateRows

setWidth

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 width