Grid with five cells in SAP UI5 - sapui5

Question

Is there a way to get 5 cell Grid per row using sap.ui.layout.Grid.
I am able to get 6 Cells when the span is 2,
4 cells when the span is 3 and
3 cells when the span is 4.
But cannot seem to get 5 cell row using this control. thoughts?

Answer 1

By default a Grid acts as a separation of the screen by 12 columns. The span indicates the size of each section you want to divide. In your example with a span of 2, the result is 6 Cells since 12/2 = 6.
Since you cannot specify a decimal size for the span, what you can do is play around with the indentation. If you choose a span of 2 like in your example but you use an indentation on the first element of 1, only 5 columns will appear since you won't have enough space for the sixth one (1 + 2 + 2 + 2 + 2 + 2 = 11 -> hence no space for a +2 column). A quick example that will allow you to see this in action is as such:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.ui.commons"
controllerName="sap.ui.layout.sample.GridProperties.GridProperties"
xmlns:html="http://www.w3.org/1999/xhtml">
<l:VerticalLayout
width="100%">
<l:Grid defaultSpan="XL2 L2 M5 S12" position="Center">
<l:content>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L2" indent="XL1" />
</layoutData>
</Label>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L2"/>
</layoutData>
</Label>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L1" />
</layoutData>
</Label>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L2" />
</layoutData>
</Label>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L2" />
</layoutData>
</Label>
<Label text="Text">
<layoutData>
<l:GridData span="XL2 L2" />
</layoutData>
</Label>
</l:content>
</l:Grid>
</l:VerticalLayout>
</mvc:View>
If you remove the indent from the first label, you'll see the 6 labels in the same row, otherwise only 5 will appear.
Hope this helps!