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

<l:Grid
  defaultSpan="L3 M4 S6"
  class="sapUiSmallMarginTop"
>
  <m:List
    mode="None"
    items="{tickets>children}"
  >
    <m:CustomListItem>
      <m:HBox>
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-green" 
          visible="{= ${tickets>status} === 'resolved'}"
          tooltip="{i18n>ticket.status.resolved}"
        />
        <core:Icon
          size="2rem"
          src="sap-icon://circle-task-2"
          class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom color-red"
          visible="{= ${tickets>status} === 'open'}"
          tooltip="{i18n>ticket.status.open}"
        />
        <m:VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
          <m:Link
            text="#{tickets>referenceNumber}"
            target="{tickets>id}"
            press="handleChildRecordPress"
          />
          <m:Label text="{
            path: 'tickets>unitID',
            formatter: '.formatUnit'
          }"/>
        </m:VBox>
      </m:HBox>
      <m:layoutData>
        <l:GridData span="L12 M12 S12" />
      </m:layoutData>
    </m:CustomListItem>
  </m:List>
</l:Grid>

But it only shows one item per row and not multiple. How can I display multiple items in a row?

This is how it looks now, what I want is to show like 3 or 4 items in a row (responsive would be nice)

Answer 1

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": {}
    }
  }
}