grid
Overview
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 columns
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 column
content overflowed and became scrollable.
A grid
contains cell
s to specify the size and position of UI components:
Basic Example

<grid>
<cell>
<heading>Cell 1</heading>
<display-image src="images/example-corp-main-view-image-001.png" />
</cell>
<cell>
<heading>Cell 2</heading>
<text-input label="First name" bind="first_name" required="false" />
</cell>
<cell>
<heading>Cell 3</heading>
<capture-photo label="Photo of Person" bind="photo" source="any" resolution="small" downloadable="true" />
</cell>
<cell column-span="2">
<heading>Cell 4</heading>
<text-input label="First name" placeholder="Enter first name" bind="first_name" required="false" />
<button label="Submit" icon="fa-arrow-right" icon-position="right" />
</cell>
<cell>
<heading>Cell 5</heading>
<object-dropdown label="Country of residence" placeholder="Select a country" query="countries" bind="selected_country" required="false" />
</cell>
<cell column-span="2">
<heading>Cell 6</heading>
<display-coordinates id="current-location" label="Current location" bind="current_location" allow-zoom="true" allow-dragging="true">
<marker label="You are here" bind="marker" icon="fa-home" />
</display-coordinates>
</cell>
</grid>
Have a look at some additional examples here:
📖grid ExamplesLimitations
Nesting a
grid
inside anobject-repeat
is not currently supported.
Standard Attributes
None
Advanced Attributes
column-count
column-count
Optional
Type: integer
Default: Is automatically determined based on the minimum allowed column width.
Specify the number of columns that the grid
will generate.

<grid column-count="3" >
<cell>
<text-input label="First name" bind="first_name" required="false" />
<button label="Button" />
</cell>
</grid>
column-min-width
column-min-width
Optional
Type: integer
Default: 250 px
Specify the minimum allowed width (in pixels) for the grid
’s columns.

<grid column-min-width="1000" >
<cell>
<text-input label="First name" bind="first_name" required="false" />
<button label="Button" />
</cell>
</grid>
column-order
column-order
Optional
Type: left-to-right
| right-to-left
Default: left-to-right
Specify the order of the grid's columns.
<info>column-order="left-to-right"</info>
<grid column-order="left-to-right" column-count="4">
<cell>
<heading>Cell 1</heading>
</cell>
<cell>
<heading>Cell 2</heading>
</cell>
<cell>
<heading>Cell 3</heading>
</cell>
<cell>
<heading>Cell 4</heading>
</cell>
</grid>
<info>column-order="right-to-left"</info>
<grid column-order="right-to-left" column-count="4">
<cell>
<heading>Cell 1</heading>
</cell>
<cell>
<heading>Cell 2</heading>
</cell>
<cell>
<heading>Cell 3</heading>
</cell>
<cell>
<heading>Cell 4</heading>
</cell>
</grid>

show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
Component Methods
None
Last updated