title: QML Repeater and QML Grid Layout with variable number of columns
body: <p>I have an model that consist of objects with some properties, e.g.:</p>
  
  <pre><code>ListModel {
      id: fruitModel
  
      ListElement {
          name: "Apple"
          color: "green"
          cost: 2.45
      }
      ListElement {
          name: "Orange"
          color: "orange"
          cost: 3.25
      }
      ListElement {
          name: "Banana"
          color: "yellow"
          cost: 1.95
      }
  }
  </code></pre>
  
  <p>And now I want to display this model using <code>GridLayout</code>. For each property I want to use one element inside <code>GridLayout</code>, e.g:</p>
  
  <pre><code>GridLayout {
      columns: 3
  
      Text { text: "Apple" }
      Rectangle { color: "green" }
      SpinBox { value: 2.45 }
  
      Text { text: "Orange" }
      Rectangle { color: "orange" }
      SpinBox { value: 3.25 }
  
      Text { text: "Banana" }
      Rectangle { color: "yellow" }
      SpinBox { value: 1.95 }
  }
  </code></pre>
  
  <p>The point is that I can easily change the <code>columns</code> property of <code>GridLayout</code> and make my layout narrower (e.g. to fit small screens). I can use Repeater to fill <code>GridLayout</code>. However such approach will fill my <code>GridLayout</code> in wrong order:</p>
  
  <pre><code>GridLayout {
      columns: 3
  
      Repeater {
          model: fruitModel
          Text { text: name }
      }
  
      Repeater {
          model: fruitModel
          Rectangle { color: color }
      }
  
      Repeater {
          model: fruitModel
          SpinBox { value: value }
      }
  }
  </code></pre>
  
  <p>And it is waste to use <code>Layout.column</code> and <code>Layout.row</code> attached properties since I want to easily change number of columns in <code>GridLayout</code>.</p>
  
  <p>Is there any way to fill <code>GridLayout</code> with data from model row by row?</p>
  
  <p><strong>UPD1:</strong></p>
  
  <p>Behaviour that I want to get:</p>
  
  <p><a href="https://i.stack.imgur.com/H63ya.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H63ya.gif" alt="enter image description here"></a> </p>
  
  <pre><code>GridLayout {
      columns: parent.width &gt; 235 ? 3 : 1
  
      Text { text: "Apple" }
      Rectangle { color: "green"; width: 40; height: 40 }
      SpinBox { value: 2 }
  
      Text { text: "Orange" }
      Rectangle { color: "orange"; width: 40; height: 40 }
      SpinBox { value: 3 }
  
      Text { text: "Banana" }
      Rectangle { color: "yellow"; width: 40; height: 40 }
      SpinBox { value: 1 }
  }
  </code></pre>
  
  <p><strong>UPD2:</strong>
  Modified variant from @m7913d:</p>
  
  <pre><code>GridLayout {
      id: layout
      property int maxColumns: 3
      columns: parent.width &gt; 235 ? maxColumns : 1
  
      Repeater {
          model: fruitModel
          Text {
              text: name
              Layout.row: layout.columns == maxColumns ? index : (maxColumns * index)
              Layout.column: 0
          }
      }
  
      Repeater {
          model: fruitModel
          Rectangle {
              Layout.preferredWidth: 30
              Layout.preferredHeight: 30
              color: col
              Layout.row: layout.columns == maxColumns ? index : (maxColumns * index + 1)
              Layout.column: layout.columns == maxColumns ? 1 : 0
          }
      }
  
      Repeater {
          model: fruitModel
          SpinBox {
              value: val
              Layout.row: layout.columns == maxColumns ? index : (maxColumns * index + 2)
              Layout.column: layout.columns == maxColumns ? 2 : 0
          }
      }
  }
  </code></pre>
  
  <p>It's working but not easy-to-modify solution plus sometimes during layout resize there is messages <code>QGridLayoutEngine::addItem: Cell (1, 0) already taken</code>.</p>