title: How to create horizontal grid with 3 items per row
body: <p>I am rendering bunch of <code>Player</code> components using <code>map()</code> loop and I would like to display them horizontally side by side using some sort of <code>Grid</code> from <code>material-ui</code>.</p>
  
  <p>Right now the components are rendering like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4OJ7K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4OJ7K.png" alt="enter image description here"></a></p>
  
  <p>And I would like to render them like this:</p>
  
  <p><a href="https://i.stack.imgur.com/esFMp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/esFMp.png" alt="enter image description here"></a></p>
  
  <p>So far I have tried this <code>Grid</code>:</p>
  
  <pre><code>render() {
          const { multipleVideoSource } = this.state;
          return (
              multipleVideoSource !== null ?
              multipleVideoSource.map(src =&gt; (
                  &lt;div style={{ row: 'horizontal' }}&gt;
                      &lt;Grid container spacing={24}&gt;
                          &lt;Grid item xs={4}&gt;
                              &lt;Player key={src} height={500} fluid={false}&gt;
                                  &lt;ControlBar autoHide={false} className="my-class" /&gt;
                                  &lt;BigPlayButton position="center" /&gt;
                                  &lt;HLSSource isVideoChild src={src} /&gt;
                              &lt;/Player&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/div&gt;
              ))
              : "Only one video"
          );
      };
  </code></pre>
  
  <p>But with no luck. Any ideas how to solve this?</p>
  
  <p>Thank you in advance.</p>