# 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`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/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`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/cell#column-span) attribute. This is useful where you want certain components to be larger than others - for example an image or a [3D model](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/display-3d-model) such in the example below:
Guided work instructions using grid
The `grid` for the above is set up as follows:
{% code title="main.view\.xml" %}
```xml
```
{% endcode %}
### 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:
```xml
```
### 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:
{% code title="main.view\.xml" %}
```xml
Select the condition of the asset:
```
{% endcode %}
When implementing the above use case with [`columns`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/columns), notice how buttons hide behind a scrollbar beyond a certain width, and on smaller screens only one column is supported:
