📖
grid Examples

Custom column width
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>
Controlled view layout
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>
Responsive layout
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
cell
list
Last modified 7mo ago