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