title: Angular Material grid making three columns width 100%
body: <p>I am trying to use a simple three-column system on an Angular web app. I just used <code>&lt;mat-grid-list&gt;</code> tag with its child elements <code>&lt;mat-grid-tile&gt;</code> but I see it just fills like the 30% of the screen.</p>
  
  <p>My code</p>
  
  <pre><code>&lt;mat-grid-list cols="4" id="page"&gt;
    &lt;mat-grid-tile id="left-sidebar"&gt;
      &lt;!-- Left Sidebar--&gt;
    &lt;/mat-grid-tile&gt;
    &lt;mat-grid-tile id="main-content" colspan="2"&gt;
      &lt;!-- Main Content --&gt;
      &lt;app-post&gt;&lt;/app-post&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/mat-grid-tile&gt;
    &lt;mat-grid-tile id="right-sidebar"&gt;
      &lt;!-- Right Sidebar--&gt;
    &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p>I need this:</p>
  
  <p><img src="https://i.imgur.com/W5tgC1G.png" alt=""></p>
  
  <p>But insted, I am getting this:</p>
  
  <p><img src="https://i.imgur.com/TPPDpZl.png" alt=""></p>
  
  <p>I have already tried to set the CSS like: <code>mat-grid-list { width: 100%; }</code> but I still see the same thing.</p>
  
  <p>Any suggestions to make the <code>mat-grid-list</code> work like the first image? Thanks in advance.</p>