Построение сетки циклом из json

Я использую компоненты ionic. В json у меня содержится id, название, и размер. У меня не получается построить 5ю строку. Или как можно это реализовать с помощью css чтобы блоки вставали на свободное место. Помогите составить цикл для построения следующей сетки:

  <IonGrid>
    <IonRow>
      <IonCol>1</IonCol>
    </IonRow>
    <IonRow>
      <IonCol>1</IonCol>
    </IonRow>
    <IonRow>
      <IonCol>1 / 2 </IonCol>
      <IonCol>1 / 2</IonCol>
    </IonRow>
    <IonRow>
      <IonCol>1 / 2</IonCol>
      <IonCol>1 / 2</IonCol>
    </IonRow>
    <IonRow>
      <IonCol>1 / 2</IonCol>
      <IonCol>
        <IonRow>1 / 2</IonRow>
        <IonRow>1 / 2</IonRow>
        <IonRow>1 / 2</IonRow>
      </IonCol>
    </IonRow>
  </IonGrid>

вот такая структура


Ответы (1 шт):

Автор решения: Инквизитор

В документации по ионику есть такое:

Content should be placed within columns, and only columns may be immediate children of rows.

В вашем коде - такое:

<IonGrid>
...
<IonRow>
  ...
  <IonCol>
    <IonRow>1 / 2</IonRow>
    <IonRow>1 / 2</IonRow>
    <IonRow>1 / 2</IonRow>
  </IonCol>
</IonRow>

Код <IonRow>1 / 2</IonRow> выглядит невалидным. Возможно, нужно добавить колонки внутри вложенных строк?

→ Ссылка