title: Suitable CSS display for showing 3 items in each row with arbitrary number of rows?
body: <p>I have a list of items that I wish to display. At first I used <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer"><code>display: flex</code></a> but noticed that when the line wrap occurred, the items weren't aligned horizontally. Then I switched to <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer"><code>display: grid</code></a> but that requires me to know the number of rows in advance.</p>
  
  <p>What kind of display is suitable for creating a grid of arbitrary many items with <em>n</em> items in each row?</p>
  
  <pre><code>&lt;div class="element"&gt;
    &lt;app-check *ngFor="let item of items" [caption]="item.name"&gt;
    &lt;/app-check&gt;
  &lt;/div&gt;
  
  div.elements {
    display: ???; ...
  }
  
  app-check {
    flex: 1 1 auto; ... ???
  }
  </code></pre>
  
  <p>The above CSS would work if I somehow could push out the items three-by-three. I can do that using some logic in the component code but it seems like an ugly hack. And I prefer to resolve it in an appropriate way.</p>