title: Trouble with Grid Layout in React Material UI
body: <p>I'm trying to achieve a specific layout using the Material UI <code>Grid</code> Component, but I just cannot for the life of me get it right.</p>
  
  <p>I have a <code>Dialog</code> where I want the Layout to end up like this:</p>
  
  <p><a href="https://i.stack.imgur.com/TVd9d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TVd9d.png" alt="enter image description here"></a></p>
  
  <p>Where the blue box contains some information about a project, the green box will contain some sort of media and the yellow box will contain a descriptive text.</p>
  
  <p>But currently, with this code, it ends up like this:</p>
  
  <pre><code>&lt;Grid xl={12}&gt;
      &lt;Grid spacing={0} xs={2}&gt;
          &lt;Grid container direction="column"&gt;
              &lt;Grid item xs={1}&gt;
                  { this.getGridItems("Platforms", data["platforms"].split(','), true) }
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  { this.getGridItems("Engines", data["engines"].split(','), true) }
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  { this.getGridItems("Frameworks", data["frameworks"].split(','), true) }
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  { this.getGridItems("Languages", data["languages"].split(',')) }
              &lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  { this.getGridItems("Roles", data["roles"].split(',')) }
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
      &lt;Grid spacing={0} xl={10}&gt;
          &lt;Grid container&gt;
              &lt;Grid item xl={9}&gt;
                  &lt;h1&gt;Image Goes Here&lt;/h1&gt;
              &lt;/Grid&gt;
              &lt;Grid item xl={3}&gt;
                  &lt;h1&gt;Description&lt;/h1&gt;
                  { data["description"] }
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QzdfG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QzdfG.png" alt="enter image description here"></a></p>
  
  <p>I cannot quite figure out where I went wrong as I can't wrap my head around how the <code>Grid</code> layout works. Please help?</p>
  
  <p>If it's necessary, here is the code for <code>getGridItems()</code>:</p>
  
  <pre><code>getGridItems = (header, data, chips) =&gt; {
      let list = [];
      let fontSize = 11;
      list.push(
          &lt;h5&gt;{ header }&lt;/h5&gt;
      );
      if(data.length &gt; 0 &amp;&amp; data[0] !== '') {
          if(chips !== undefined &amp;&amp; true) {
              data.forEach(value =&gt; {
                  let chipData = ChipConstants[value];
                  list.push(
                      &lt;Grid item xs&gt;
                          &lt;Chip
                              style={{ fontSize: fontSize}}
                              avatar={
                                  &lt;Avatar
                                      style={{ width: 24, height: 24 }}
                                      alt={chipData["avatar"]["alt"]}
                                      src={require("../img/avatars/"+chipData["avatar"]["img"])}
                                  /&gt;}
                              label={chipData["avatar"]["alt"]}
                              className={styles.chip}
                          /&gt;
                      &lt;/Grid&gt;
                  );
              });
          } else {
              data.forEach(value =&gt; {
                  list.push(
                      &lt;Grid item xs style={{ fontSize: fontSize}}&gt;
                          { value }
                      &lt;/Grid&gt;
                  );
              });
          }
      } else {
          list.push(
              &lt;Grid item xs style={{ fontSize: fontSize}}&gt;
                  None
              &lt;/Grid&gt;
          );
      }
      return list;
  };
  </code></pre>