grid
Last updated
Last updated
The grid
UI component gives developers more control over the layout of UI components in a view. This is useful when there is a need to customize the width of UI components respective to other components on the view (where previously kept each component’s width equal). grid
could also be used to layout components in a way that is similar to layout to icons on a phone’s homescreen. Another use case is to keep more content visible on the screen, where previously content overflowed and became scrollable.
A grid
contains cell
s to specify the size and position of UI components:
Have a look at some additional examples here:
Nesting a grid
inside an object-repeat
is not currently supported.
None
column-count
Optional
Type: integer
Specify the number of columns that the grid
will generate.
column-min-width
Optional
Type: integer
Default: 250 px
Specify the minimum allowed width (in pixels) for the grid
’s columns.
column-order
Optional
Type: left-to-right
| right-to-left
Default: left-to-right
Specify the order of the grid's columns.
show-if
and hide-if
None
Default: Is automatically determined based on the .
If column-count
has not been specified, i.e. the column count is automatically determined, the grid component will try and reduce the number of columns to adhere to the as the screen size is reduced.