title: split slider Items in multiple rows
body: <p>I hope you can give me a hint:
  A slider of category images with a url link will be displayed on a start page. Just 4 images per row have to be displayed. How can do that? I cant see the solution. :-/</p>
  <p>The website uses i.a. react.js.</p>
  <pre><code>&lt;div className=&quot;middle-section&quot;&gt;
            {categories &amp;&amp; categories.length &gt; 0 &amp;&amp;
              &lt;div className=&quot;categories-wrapper&quot;&gt;
                &lt;Slider multi&gt;
                  {
                    categories.map((model) =&gt; {
                      return &lt;CategoryItem key={model.ID} model={model}
                        url={urlGenerator.get({ page: 'category', id: model.FriendlyID, name: decodeStringForURL(model.Name) })} /&gt;
                    }
                    )
                  }
                &lt;/Slider&gt;
              &lt;/div&gt;
            }
  </code></pre>
  <p>The element CategoryItem looks like below:</p>
  <pre><code>const CategoryItem = ({ model, url, className }) =&gt; {
    if (!model) {
      return &lt;div className=&quot;category-item&quot; /&gt;
    }
  
    const imageUrl = model.ImageUrl ? model.ImageUrl : require(`$assets/images/default.png`)
    return (
      &lt;div&gt;
      &lt;Link to={url}&gt;
        &lt;a className={`category-item ${className || ''}`} data-qaautomationinfo={model.FriendlyID}&gt;
          &lt;div className=&quot;image-wrapper&quot;&gt;
            &lt;img src={imageUrl} /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;category-name&quot;&gt;
            &lt;HTMLLinesEllipsis style={{ whiteSpace: 'pre-wrap' }} unsafeHTML={model.Name} maxLine={2} basedOn='words' /&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The CSS of CategoryItem looks like below:</p>
  <pre><code>.category-item {
    display: flex;
    flex-direction: column;
    font-size: var(--text-size-label);
  }
  </code></pre>
  <p>I really cant see it.</p>
  <p>Hope you can help me guys.</p>
  <p>Thx a lot!</p>