📖
grid Examples
A simple but powerful use case for
grid
is controlling the width of columns in your view. With the
columns
UI component, you can add any number of columns to your view, however they will all have the same width:
Guided work instructions using columns
With
grid
, you can also add any number of columns to your view, and you can control the span of each column (i.e. its width) using the column-span
attribute. This is useful where you want certain components to be larger than others - for example an image or a 3D model such in the example below:
Guided work instructions using grid
The
grid
for the above is set up as follows:main.view.xml
<grid column-count="6" column-min-width="100">
<cell column-span="4">
<!-- Add UI components here -->
</cell>
<cell column-span="2">
<!-- Add UI components here -->
</cell>
</grid>
Another common use case for
grid
is to utilize more of the available screen space, by dividing the view into a number of cells and carefully positioning each UI component. For example:
In this example the view is divided into 6 cells:

The code for this
grid
is as follows:<grid column-count="6" column-min-width="100">
<cell column-span="1">
<!-- Cell 1 -->
</cell>
<cell column-span="3">
<!-- Cell 2 -->
</cell>
<cell column-span="2">
<!-- Cell 3 -->
</cell>
<cell column-span="6">
<!-- Cell 4 -->
</cell>
<cell column-span="2">
<!-- Cell 5 -->
</cell>
<cell column-span="4">
<!-- Cell 6 -->
</cell>
</grid>
grid
is fully responsive to different screen sizes and orientations by default. This is illustrated by the simple example below:
1024 px screen width

768 px screen width
And the corresponding code:
main.view.xml
<info>Select the condition of the asset:</info>
<grid>
<cell>
<button color="#ff0000" text-color="#fff" label="Extremely Poor" />
</cell>
<cell>
<button color="#fd4900" text-color="#fff" label="Very Poor" />
</cell>
<cell>
<button color="#f66d00" text-color="#fff" label="Poor" />
</cell>
<cell>
<button color="#e98b00" text-color="#fff" label="Slightly Below Average" />
</cell>
<cell>
<button color="#d7a700" label="Average"/>
</cell>
<cell>
<button color="#bfbf00" label="Slightly Above Average" />
</cell>
<cell>
<button color="#a0d600" label="Good" />
</cell>
<cell>
<button color="#76eb00" label="Very Good" />
</cell>
<cell>
<button color="#00ff00" label="Excellent" />
</cell>
</grid>
When implementing the above use case with
columns
, notice how buttons hide behind a scrollbar beyond a certain width, and on smaller screens only one column is supported:
1024 px screen width

768 px screen width
Last modified 7mo ago