search
What's NewDeveloper CommunitySupportStatus

📖grid Examples

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

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

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

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
PreviouscellNextlist

Last updated