Arrange list items in grid

Question

What I want to do is to arrange the list items (coming from a binding) in a grid with columns. Here is my code:

Answer 1

I thing what you need is a sap.m.Table not a Grid, neither a List

Answer 2

UI5 1.60 introduces a new control named sap.f.GridList^API that combines functionalities of sap.m.ListBase (e.g. growing) with the ability to display list items in a grid layout (display: grid in CSS internally).

<f:GridList xmlns:f="sap.f"
  class="sapUxAPObjectPageSubSectionAlignContent"
  items="..."
>
  <f:customLayout>
    <cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxesPerRowConfig="XL7 L4 M3 S1" />
  </f:customLayout>
  <f:items>
    <!-- m.CustomListItem, m.StandardListItem, etc.. -->
  </f:items>
</f:GridList>

The custom layout GridBoxLayout^API enables displaying the grid items in a responsive way, which can be configured via boxPerRowConfig and boxMinWidth properties.

^{Source: https://ui5.sap.com/#/sample/sap.f.sample.GridListBoxContainer/preview}

---

Note: sap.f.GridList currently has dependencies to sap.m, sap.f, and sap.ui.layout. Add them to the list of dependencies, e.g. in the app descriptor, so that those libraries can be loaded in parallel with other dependent libs asynchronously:

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.ui.core": {},
      "sap.m": {},
      "sap.f": {},
      "sap.ui.layout": {}
    }
  }
}