📖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:
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:
The grid for the above is set up as follows:
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:
Responsive layout
grid is fully responsive to different screen sizes and orientations by default. This is illustrated by the simple example below:
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:
Last updated
